"Maximum call stack size exceeded" - npm install react-scripts#latest - npm

We are experiencing issues upgrading to create-react-scripts 2.
I have no problem running npx create-react-app. App is created and runs fine.
In apps based on create-react-app, npm i react-scripts#latest generates:
npm ERR! Maximum call stack size exceeded npm ERR! A complete log of
this run can be found in: npm ERR!
C:\Users\me\AppData\Roaming\npm-cache_logs\2018-10-09T19_27_15_671Z-debug.log
In log file:
4092 http fetch GET 404 https://registry.npmjs.org/#xtuc%2flong 426ms
4093 silly fetchPackageMetaData error for #xtuc/long#4.2.1 404 Not
Found: #xtuc/long#4.2.1 4094 verbose stack RangeError: Maximum call
stack size exceeded
npm: 6.4.1
node: 8.12.0
Windows 10 (but also reproducible in Docker node:8.12.0)
This is the package.json with older react-scripts that works fine:
...
"dependencies": {
"#material-ui/core": "^3.0.2",
"#material-ui/icons": "^3.0.1",
"classnames": "^2.2.6",
"faker": "^4.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-markdown": "^3.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.0.4",
"react-syntax-highlighter": "^7.0.4",
"typeface-lato": "^0.0.54"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.0.0",
"#material-ui/codemod": "^1.1.0",
"#types/webdriverio": "4.8.7",
"babel-plugin-istanbul": "^4.1.6",
"chromedriver": "2.35",
"commander": "^2.15.1",
"copyfiles": "^1.2.0",
"cross-env": "^5.2.0",
"cucumber": "^3.1.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.4.0",
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-nibble": "^4.2.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.22.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-webdriverio": "^1.0.1",
"gherkin-lint": "^2.11.1",
"jest-junit": "^3.7.0",
"markdownlint": "^0.10.0",
"markdownlint-cli": "^0.10.0",
"mkdirp": "^0.5.1",
"prettier-eslint": "^8.8.2",
"prettier-eslint-cli": "^4.7.1",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0",
"rimraf": "^2.6.2",
"selenium-webdriver": "3.6",
"should": "^13.1.0",
"wdio-cucumber-framework": "1.0.2",
"wdio-junit-reporter": "^0.4.4",
"wdio-selenium-standalone-service": "0.0.9",
"wdio-spec-reporter": "0.1.2",
"webdriverio": "^4.13.1"
}
}
Changing package.json to read "react-scripts": "^2.0.4" and then npm i or running npm i react-scripts#latest both fail.
Any help would be greatly appreciated.

Related

Npm install try to install dependency not in package.json and prints error

On a project, I try to npm install for the first time. But it tries to install the dependency "js-xlsx" but i can't see it in package.json
Moreover, it prints error and can't install it, and install nothing else .
The error when npm install :
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t https://github.com/securedeveloper/js-xlsx.git
npm ERR!
npm ERR! fatal: unable to access 'https://github.com/securedeveloper/js-xlsx.git/': Could not resolve host: github.com
npm ERR!
npm ERR! exited with error code: 128
Here is my package.json :
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"create-react-class": "^15.6.3",
"fixed-data-table": "^0.6.3",
"jsx-to-string": "^1.0.2",
"lodash": "^4.17.5",
"moment": "^2.18.1",
"object-unfreeze": "^1.1.0",
"react": "^15.5.4",
"react-bootstrap": "^0.30.7",
"react-calendar-timeline": "^0.15.12",
"react-chartjs-2": "^2.1.0",
"react-data-export": "^0.4.2",
"react-dom": "^15.5.4",
"react-grid-layout": "^0.16.0",
"react-notification-system": "^0.2.16",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"react-treebeard": "^2.0.3",
"redux": "^3.6.0",
"xhr": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-entry-webpack-plugin": "^1.0.0-beta.4",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-15": "^1.0.5",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.6.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.1.0",
"jest-sonar-reporter": "^2.0.0",
"mini-css-extract-plugin": "^0.4.0",
"mock-local-storage": "^1.0.5",
"optimize-css-assets-webpack-plugin": "^4.0.2",
"react-css-modules": "^4.1.0",
"react-datetime": "^2.8.9",
"react-test-renderer": "^15.6.2",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
},
Why does it try to install it ? Does it need it for another dependency ?
How can i solve this ?
So, I needed to configure not only the proxy of npm, but git also :
git config --global http.proxy http://proxyUsername:proxyPassword#proxy.server.com:port
git config --global https.proxy http://proxyUsername:proxyPassword#proxy.server.com:port
git config http.sslVerify false

How to fix ERROR TypeError: compiler.plugin is not a function error in Vue.js?

I have a vue codebase I am trying to run on my end. I have done npm install but whenever I try to run npm run serve, I get the error above. I will be posting the full stack trace here.
INFO Starting development server...
ERROR TypeError: compiler.plugin is not a function
TypeError: compiler.plugin is not a function
at LimitChunkCountPlugin.apply (E:\Teogundipe\Dev\Alero\client-app\node_modules\webpack\lib\optimize\LimitChunkCountPlugin.js:16:12)
at createCompiler (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:73:12)
at create (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:134:16)
at webpack (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:158:32)
at f (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\node_modules\webpack\lib\index.js:64:16) at serve (C:\Users\oilesanmi\AppData\Roaming\nvm\v14.20.0\node_modules\#vue\cli-service\lib\commands\serve.js:185:22)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! alero#1.1.0 serve: `vue-cli-service serve --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the alero#1.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\oilesanmi\AppData\Roaming\npm-cache\_logs\2022-11-01T16_12_02_116Z-debug.log
Here is the package.json file I am currently using.
"dependencies": {
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"chokidar": "^3.5.2",
"console": "^0.7.2",
"core-util-is": "^1.0.2",
"device-detector-js": "^2.2.7",
"dinero.js": "^2.0.0-alpha.8",
"element-ui": "^2.15.6",
"file-saver": "^2.0.5",
"https": "^1.0.0",
"moment": "^2.29.1",
"save": "^2.4.0",
"underscore-contrib": "^0.3.0",
"vue": "^2.5.2",
"vue-chartjs": "^3.5.1",
"vue-excel-editor": "^1.5.5",
"vue-excel-export": "^0.1.3",
"vue-excel-xlsx": "^1.2.2",
"vue-json-excel": "^0.2.99",
"vue-month-picker": "^1.6.0",
"vue-router": "^3.0.1",
"vuejs-paginate": "^2.1.0",
"vuetify": "^2.6.0",
"vuex": "^3.5.1",
"xlsx": "^0.15.6"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"mini-css-extract-plugin": "^2.6.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.8.5",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.0",
"webpack-shell-plugin-next": "^2.2.2"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
What can be done please? I am using windows.
I have tried other similar situations, it doesn't seem to be working. I have remove cached forcefully, deleted node-modules and package-lock.json.
I expect to successfully launch the code on running npm run serve

How to install all packages from Gatsby V3

I currently have Gatsby installed on version 4, but I wanted to "downgrade" it to version 3, and all dependencies to be compatible with version 3.
Is there any method to "downgrade" everything to the most up-to-date V3 version?
My package.json
"dependencies": {
"#babel/plugin-transform-typescript": "^7.16.1",
"#styled-icons/boxicons-regular": "^10.38.0",
"#types/node": "^16.11.7",
"#types/react": "^17.0.34",
"#types/react-helmet": "^6.1.4",
"gatsby": "^4.1.1",
"gatsby-plugin-gatsby-cloud": "^4.1.0",
"gatsby-plugin-image": "^2.1.2",
"gatsby-plugin-manifest": "^4.1.0",
"gatsby-plugin-offline": "^5.1.0",
"gatsby-plugin-react-helmet": "^5.1.0",
"gatsby-plugin-sharp": "^4.1.3",
"gatsby-source-filesystem": "^4.1.2",
"gatsby-transformer-sharp": "^4.1.0",
"plop": "^2.7.6",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-markdown": "^7.1.0",
"rehype-raw": "^6.1.0",
"styled-components": "^5.3.3",
"styled-media-query": "^2.1.2",
"swiper": "^7.2.0",
"tslint": "^6.1.3",
"typescript": "^4.4.4"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#react-icons/all-files": "^4.1.0",
"#storybook/addon-actions": "^6.3.12",
"#storybook/addon-essentials": "^6.3.12",
"#storybook/addon-links": "^6.3.12",
"#storybook/builder-webpack5": "^6.3.12",
"#storybook/manager-webpack5": "^6.3.12",
"#storybook/react": "^6.3.12",
"#types/react-dom": "^17.0.11",
"#types/styled-components": "^5.1.15",
"#types/swiper": "^5.4.3",
"#typescript-eslint/eslint-plugin": "^5.3.1",
"#typescript-eslint/parser": "^5.3.1",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^1.13.3",
"chromatic": "^6.0.6",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"gatsby-plugin-scss-typescript": "^5.1.0",
"gatsby-plugin-styled-components": "^5.1.0",
"gatsby-plugin-typescript-scss-modules": "^1.0.7",
"prettier": "^2.4.1",
"storybook-addon-gatsby": "^0.0.2"
},
There's no magic command to downgrade automatically Gatsby version and all related dependencies. Basically, you need uninstall and reinstall Gatsby to your desired version:
If you need to reset your gatsby-cli version:
npm uninstall -g gatsby-cli
npm install -g gatsby-cli#latest
After that:
npm install gatsby#3.14
Where 3.14 is your desired version (according to the releases notes it should be 3.14).
Then, you will need to run:
npm outdated
To fix your dependency versions.
You'll need to remove the node_modules and the package-lock.json before installing and auditing the packages to avoid locked dependencies and odd behaviors.

"npm ci" throws exception: Cannot read property 'length' of undefined

I'm getting this exception both on my local environment and in CircleCI.
> core-js#3.6.4 postinstall /home/vallo/project/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
npm ERR! Cannot read property 'length' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vallo/.npm/_logs/2020-01-16T20_12_00_564Z-debug.log
/home/vallo/.npm/_logs/2020-01-16T20_12_00_564Z-debug.log last lines:
11424 info lifecycle #babel/core#7.8.3~postinstall: #babel/core#7.8.3
11425 info lifecycle undefined#undefined~install: undefined#undefined
11426 verbose stack TypeError: Cannot read property 'length' of undefined
11426 verbose stack at _incorrectWorkingDirectory (/home/vallo/.nvm/versions/node/v12.14.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:114:60)
11426 verbose stack at /home/vallo/.nvm/versions/node/v12.14.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:86:44
11426 verbose stack at /home/vallo/.nvm/versions/node/v12.14.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:218:12
11426 verbose stack at callback (/home/vallo/.nvm/versions/node/v12.14.0/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:295:20)
11426 verbose stack at FSReqCallback.oncomplete (fs.js:159:5)
11427 verbose cwd /home/vallo/project
11428 verbose Linux 5.3.0-26-generic
11429 verbose argv "/home/vallo/.nvm/versions/node/v12.14.0/bin/node" "/home/vallo/.nvm/versions/node/v12.14.0/bin/npm" "ci"
11430 verbose node v12.14.0
11431 verbose npm v6.13.6
11432 error Cannot read property 'length' of undefined
11433 verbose exit [ 1, true ]
This is my package.json:
{
"private": true,
"scripts": {
"install": "npx babel-node scripts/npm/install.js",
"test": "npx babel-node scripts/npm/test.js",
"lambda-test": "lambda/serverUnit.sh",
"lint": "node_modules/.bin/eslint .",
"flow": "flow; test $? -eq 0 -o $? -eq 2"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/node": "^7.2.2",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-transform-modules-commonjs": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-flow": "^7.0.0",
"#babel/register": "^7.4.4",
"#sanjo/jasmine-expect": "^1.0.1",
"#sanjo/jasmine-spy": "^1.0.1",
"#share911/babel-plugin-root-slash-import": "^1.2.0",
"aws-sdk": "^2.521.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"babel-plugin-meteor-imports": "^1.0.3",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"chai": "^4.2.0",
"commander": "2.9.0",
"eslint": "^6.3.0",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-standard": "^4.0.1",
"flow-bin": "^0.106.3",
"jsdom": "^15.1.1",
"jsdom-global": "^3.0.2",
"json-loader": "^0.5.4",
"karma": "^4.1.0",
"karma-browserify": "^6.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"meteor": "./modules/meteor/",
"meteor-promise": "^0.8.0",
"mocha": "^6.1.4",
"phantomjs-prebuilt": "^2.1.15",
"proxyquire": "^1.7.10",
"proxyquireify": "^3.2.0",
"serverless": "^1.51.0",
"sinon": "^7.3.2",
"standard": "^12.0.1",
"tingodb": "^0.6.1",
"wallabify": "0.0.14",
"watchify": "^3.11.1",
"webpack": "^4.30.0",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"#babel/runtime": "^7.4.5",
"aws-xray-sdk-core": "^2.3.5",
"chai-as-promised": "^7.1.1",
"json-to-pretty-yaml": "^1.2.2",
"obj-resolve": "^1.0.4",
"winston": "^3.2.1"
}
}
I'm running node 12.14.0 and npm 6.13.6
Problem is on function _incorrectWorkingDirectory from npm-lifecycle, which does not check if pkg.name is null therefore throws an exception.
To fix this, add "name" property to package.json.
https://github.com/npm/npm-lifecycle/blob/latest/index.js#L114

TypeError: Cannot read property 'babel' of undefined

Following is my package json file. I have installed node_modules successfully. But Getting the error:
"TypeError: Cannot read property 'babel' of undefined"
while running "webpack --watch".
Please let me know if anyone is aware of this.
"axios": "0.16.2",
"babel-plugin-root-import": "^5.1.0",
"bootstrap": "3.3.7",
"chalk": "^2.3.0",
"chart.js": "^2.7.1",
"del": "^3.0.0",
"html-entities": "^1.2.1",
"jquery": "3.1.1",
"karma-es6-shim": "^1.0.0",
"leaflet": "1.0.*",
"less": "2.7.2",
"libphonenumber-js": "^1.2.12",
"lodash": "4.17.4",
"moment": "^2.19.1",
"store": "^2.0.12",
"url-loader": "0.5.8",
"vee-validate": "2.0.0-rc.7",
"vue": "2.4.2",
"vue-chartjs": "^2.7.2",
"vue-loader": "12.0.3",
"vue-paginate": "3.4.0",
"vue-resource": "1.2.1",
"vue-router": "2.3.1",
"vue-template-compiler": "2.4.2",
"vuejs-datepicker": "0.6.3",
"vuex": "^2.5.0"
},
"devDependencies": {
"babel-cli": "6.23.0",
"babel-core": "6.23.1",
"babel-loader": "6.3.2",
"babel-preset-es2015": "6.22.0",
Your version of babel-loader looks to be out of date. Uninstall it with npm uninstall babel-loader and re-install with npm i -D babel-loader. You may also need to update to babel-preset-env and remove babel-preset-es2015
https://babeljs.io/docs/en/env/#upgrading-to-babel-preset-env
For me it was a version mismatch between webpack and babel-loader.
I had babel-loader#6.2.0 with webpack#4.12.0, updating to babel-loader#7.1.4 fixed the issue for me.