We Keep Coding

i am just trying to install the package of react js but i am getting errors

I am just trying to install react but I am getting errors.
I have installed npm -v 8.12.1 version in my system. I have tried to downgrade react but it doesn't help
I have tried these type:
update npm npm install npm -g
downgraded react to "react": "15.3.0"
cleared cache: npm cache clear
removed node_modules, rm -rf node_modules,
reinstalled node_modules, npm install
{
"name": "ant-design-pro",
"version": "2.0.0",
"description": "An out-of-box UI solution for enterprise applications",
"private": true,
"scripts": {
"precommit": "npm run lint-staged",
"presite": "node ./scripts/generateMock.js && cd functions && npm install",
"start": "cross-env APP_TYPE=site umi dev",
"start:no-mock": "cross-env MOCK=none umi dev",
"build": "umi build",
"site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy",
"analyze": "cross-env ANALYZE=1 umi build",
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
"lint": "eslint --ext .js src mock tests && npm run lint:style",
"lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:all": "node ./tests/run-tests.js",
"prettier": "prettier --write ./src/**/**/**/*",
"docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
"docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
"docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
"docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build"
},
"dependencies": {
"#antv/data-set": "^0.9.6",
"#babel/runtime": "^7.0.0",
"antd": "^3.11.6",
"bizcharts": "^3.2.2",
"bizcharts-plugin-slider": "^2.0.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"enquire-js": "^0.2.1",
"hash.js": "^1.1.5",
"highlight.js": "^9.13.1",
"lodash": "^4.17.10",
"lodash-decorators": "^6.0.0",
"marked": "^0.5.2",
"memoize-one": "^4.0.0",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"nzh": "^1.0.3",
"omit.js": "^1.0.0",
"path-to-regexp": "^2.4.0",
"prop-types": "^15.5.10",
"qs": "^6.5.2",
"rc-animate": "^2.4.4",
"react": "^16.8.6",
"react-container-query": "^0.11.0",
"react-copy-to-clipboard": "^5.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.8.6",
"react-fittext": "^1.0.0",
"react-router-dom": "^4.3.1",
"save": "^2.3.2",
"simplemde": "^1.11.2"
},
"devDependencies": {
"#types/react": "^16.4.11",
"#types/react-dom": "^16.0.6",
"antd-pro-merge-less": "^0.0.9",
"antd-pro-theme-webpack-plugin": "^1.1.8",
"babel-eslint": "^9.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"cross-env": "^5.1.1",
"cross-port-killer": "^1.0.1",
"enzyme": "^3.4.4",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-compat": "^2.5.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"eslint-plugin-react": "^7.11.1",
"gh-pages": "^2.0.0",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"merge-umi-mock-data": "^0.0.3",
"mockjs": "^1.0.1-beta3",
"prettier": "1.14.2",
"pro-download": "^1.0.1",
"stylelint": "^9.4.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"umi": "^2.1.1",
"umi-plugin-ga": "^1.0.3",
"umi-plugin-react": "^1.1.1"
},
"optionalDependencies": {
"puppeteer": "^1.6.0"
},
"lint-staged": {
"**/*.{js,jsx,less}": [
"prettier --write",
"git add"
],
"**/*.{js,jsx}": "npm run lint-staged:js",
"**/*.less": "stylelint --syntax less"
},
"engines": {
"node": ">=8.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-fittext#1.0.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.6" from the root project
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from #ant-design/create-react-context#0.2.5
npm ERR! node_modules/#ant-design/create-react-context
npm ERR! #ant-design/create-react-context#"^0.2.4" from antd#3.26.20
npm ERR! node_modules/antd
npm ERR! antd#"^3.11.6" from the root project
npm ERR! 1 more (umi-plugin-react)
npm ERR! #ant-design/create-react-context#"^0.2.4" from rc-mentions#0.4.2
npm ERR! node_modules/rc-mentions
npm ERR! rc-mentions#"~0.4.0" from antd#3.26.20
npm ERR! node_modules/antd
npm ERR! antd#"^3.11.6" from the root project
npm ERR! 1 more (umi-plugin-react)
npm ERR! 2 more (rc-tabs, rc-tree)
npm ERR! 47 more (#ant-design/icons-react, airbnb-prop-types, antd, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0" from react-fittext#1.0.0
npm ERR! node_modules/react-fittext
npm ERR! react-fittext#"^1.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#15.7.0
npm ERR! node_modules/react
npm ERR! peer react#"^15.0.0" from react-fittext#1.0.0
npm ERR! node_modules/react-fittext
npm ERR! react-fittext#"^1.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\91639\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\91639\AppData\Local\npm-cache\_logs\2022-06-03T09_27_25_556Z-debug-0.log

As the error reads, you have dependency conflict.
Run the command with --legacy-peer-deps.
npm install --legacy-peer-deps

can't install dependencies because of node and webpack version conflict

I am trying to install the dependencies with the exact version which are listed in json file, and I got errors below:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! webpack#"^4.35.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.1.0" from terser-webpack-plugin#5.3.1
npm ERR! node_modules/terser-webpack-plugin
npm ERR! dev terser-webpack-plugin#"^5.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
since the dependencies with the required version are not the latest one, I downgrade my node.js from latest version 16 to 14+, and install with npm i --leacy-peer-deps, but the error shows still the same, seems the version from node or webpack still not compatible to the dependencies(Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! webpack#"^4.35.3" from the root project).
how can I solve this problem?
here is the json list:
{
"name": "example-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack-dev-server --config webpack.dev.js --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jest-fetch-mock": "^3.0.3",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
},
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/plugin-transform-modules-commonjs": "^7.13.8",
"#babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"body-parser": "^1.19.0",
"clean-webpack-plugin": "^3.0.0",
"cors": "^2.8.5",
"css-loader": "^5.2.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^1.4.1",
"node-fetch": "^2.6.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"webpack-dev-server": "^3.11.2",
"workbox-webpack-plugin": "^6.1.5"
}
}

Try to delete package-lock.json and clear npm cache using 'npm cache clean -f' before npm i.
Caret (^) notation: It will update you to all future minor/patch versions, without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to <3.0.0
Tilde ( ~ ): It will update you to all future patch versions, without incrementing the minor version. ~1.2.3 will use releases from 1.2.3 to <1.3.

How to install dependencies on Heroku after deplyment of Node App?

I have a node app, perfectly running on the localhost. but after deploying it to Heroku it crashes.
Here's the Error Log:
2019-11-07T10:58:20.359983+00:00 heroku[web.1]: Starting process with
command `npm start`
2019-11-07T10:58:22.882837+00:00 heroku[web.1]: State changed from starting to crashed
2019-11-07T10:58:22.866125+00:00 heroku[web.1]: Process exited with status 1
2019-11-07T10:58:22.768738+00:00 app[web.1]:
2019-11-07T10:58:22.768765+00:00 app[web.1]: > dpapi#1.0.0 start /app
2019-11-07T10:58:22.768768+00:00 app[web.1]: > nodemon --exec babel-node server.js --plugins css-modules-transform --ignore dist/
2019-11-07T10:58:22.768770+00:00 app[web.1]:
2019-11-07T10:58:22.783839+00:00 app[web.1]: sh: 1: nodemon: not found
2019-11-07T10:58:22.788270+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-11-07T10:58:22.788822+00:00 app[web.1]: npm ERR! syscall spawn
2019-11-07T10:58:22.789278+00:00 app[web.1]: npm ERR! file sh
2019-11-07T10:58:22.789688+00:00 app[web.1]: npm ERR! errno ENOENT
2019-11-07T10:58:22.791368+00:00 app[web.1]: npm ERR! dpapi#1.0.0 start: `nodemon --exec babel-node server.js --plugins css-modules-transform --ignore dist/`
2019-11-07T10:58:22.791637+00:00 app[web.1]: npm ERR! spawn ENOENT
2019-11-07T10:58:22.791917+00:00 app[web.1]: npm ERR!
2019-11-07T10:58:22.792199+00:00 app[web.1]: npm ERR! Failed at the dpapi#1.0.0 start script.
2019-11-07T10:58:22.792534+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-11-07T10:58:22.802491+00:00 app[web.1]:
2019-11-07T10:58:22.802775+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-11-07T10:58:22.802918+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2019-11-07T10_58_22_793Z-debug.log
I am not sure about the cause but it looks like it can't find nodemon, Maybe it's unable to install all the dependencies. as mentioned in the error message;
Here's my Procfile:
web: npm start
and Here's my package.json
{
"name": "dpapi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --exec babel-node server.js --plugins css-modules-transform --ignore dist/",
"dev": "webpack -wd"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.4.4",
"babel-eslint": "^10.0.1",
"babel-preset-es2015": "^6.24.1",
"eslint": "^5.16.0",
"eslint-plugin-react": "^7.13.0",
"nodemon": "^1.18.11",
"webpack-cli": "^3.3.1"
},
"dependencies": {
"#babel/core": "^7.4.4",
"#babel/node": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "^4.0.0-rc.0",
"#material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"bcrypt": "^3.0.6",
"body-parser": "^1.19.0",
"buffer": "^5.2.1",
"dropbox": "^4.0.17",
"ejs": "^2.6.1",
"express": "^4.16.4",
"global": "^4.4.0",
"imagemagick": "^0.1.3",
"isomorphic-fetch": "^2.2.1",
"js-file-download": "^0.4.7",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.5.7",
"morgan": "^1.9.1",
"multer": "^1.4.1",
"node-fetch": "^2.5.0",
"nodemailer": "^6.2.1",
"query-string": "^6.5.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-stripe-elements": "^3.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"rimraf": "^2.6.3",
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0",
"stripe": "^7.4.0",
"webpack": "^4.30.0"
}
}

Heroku deployment fails because it cannot find nodemon in your dependencies. The easy solution would probably be to move it in there.
The more accurate answer, your current configuration is perfect for development but not for production.
I would advise to first compile your code with webpack (or whatever you currently use), deploy the build code and use the regular node server.js as your npm start script.
Heroku will take care of restarting your application in case of a failure, you don't need nodemon.

Chunk.entrypoints: Use Chunks.addGroup instead

I'm using npm version 6.0.1.
my os is macOs High Sierra Version 10.13.3
I want to build my project but I got this error message:
Creating an optimized production build...
/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/webpack/lib/Chunk.js:533
throw new Error("Chunk.entrypoints: Use Chunks.addGroup instead");
^
Error: Chunk.entrypoints: Use Chunks.addGroup instead
at Chunk.set (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/webpack/lib/Chunk.js:533:9)
at /Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/extract-text-webpack-plugin/dist/index.js:176:40
at Array.forEach (<anonymous>)
at Compilation.<anonymous> (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/extract-text-webpack-plugin/dist/index.js:171:18)
at Compilation.applyPluginsAsyncSeries (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/tapable/lib/Tapable.js:206:13)
at Compilation.seal (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:605:8)
at applyPluginsParallel.err (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:508:17)
at /Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:507:11)
at processModuleDependencies.err (/Users/mohammadmehdi/Documents/Work/sevenapp/node_modules/react-scripts/node_modules/webpack/lib/Compilation.js:477:14)
at process._tickCallback (internal/process/next_tick.js:172:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sevenapp#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sevenapp#0.1.0 build 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! /Users/mohammadmehdi/.npm/_logs/2018-07-02T13_17_58_331Z-debug.log
this is my package.json:
{
"name": "sevenapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0",
"jquery": "^3.3.1",
"rc-pagination": "^1.16.4",
"react": "^16.2.0",
"react-countup": "^3.0.3",
"react-dom": "^16.2.0",
"react-paginate": "^5.2.3",
"react-player": "^1.6.4",
"react-popup": "^0.9.3",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^4.0.0"
},
"scripts": {
"start": "PORT=3000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"author": "",
"license": "ISC"
}
I run this command:
npm run build --release
Do I need to install webpack?
Can I build my project without webpack?
I want to release my project?
I don't know what is my wrong.

Looks related to webpack-contrib/extract-text-webpack-plugin#701.
Running npm install -D extract-text-webpack-plugin#next solved the issue locally for me.
you can also check same thread here on below link https://github.com/facebook/create-react-app/issues/4356

Heroku NodeJS App Build Failing

I'm receiving a build failed error while deploying my NodeJS app to Heroku. Here is the build log:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.10.0
engines.npm (package.json): 5.7.1
Resolving node version 8.10.0...
Downloading and installing node 8.10.0...
Bootstrapping npm 5.7.1 (replacing 5.6.0)...
npm 5.7.1 installed
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json + package-lock)
npm ERR! path /tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev'
-> '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/.abbrev.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.X6IAU/_logs/2018-03-24T03_18_22_202Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app. ! Push failed
I have deleted my node_modules folder and ran npm install and deleted/installed the abbrev npm package. Still the same error after this.
Here is my package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon bin/dev",
"clean": "rm -rf dist",
"build": "npm run clean && mkdir dist && babel server -s -d dist",
"production": "npm run build && nodemon bin/production"
},
"keywords": [],
"author": "",
"devDependencies": {
"dotenv": "^4.0.0"
},
"dependencies": {
"async": "^2.6.0",
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.2",
"boom": "^7.2.0",
"compression": "^1.7.2",
"cron": "^1.3.0",
"express": "^4.16.3",
"express-rate-limit": "^2.11.0",
"express-validator": "^3.2.1",
"flat": "^4.0.0",
"generate-password": "^1.4.0",
"helmet": "^3.12.0",
"jsonwebtoken": "^7.4.3",
"moment": "^2.21.0",
"moment-timezone": "^0.5.14",
"mongoose": "^4.13.12",
"morgan": "^1.9.0",
"nodemon": "^1.17.2",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"passport-local": "^1.0.0",
"sendgrid": "^5.2.3",
"twilio": "^3.13.1",
"uuid": "^3.2.1"
},
"engines": {
"node": "8.10.0",
"npm": "5.7.1"
}
}
Any suggestions are appreciated. Thank you.