How to solve react webpack problem with npm-start - reactjs

Here is my error page:
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it
automatically. However, a different version of webpack was detected
higher up in the tree:
C:\Users\Acer\node_modules\webpack (version: 4.28.3)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if C:\Users\Acer\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-)
We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! first-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the first-app#0.1.0 start 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\Acer\AppData\Roaming\npm-cache\_logs\2019-01-03T12_30_23_160Z-debug.log
I've applied all steps but, npm start command still doesn't work.
What should I do?

I got the solution! Focus on the point 6: it asks to delete node_modules folder outside your project directory.
So, I deleted my C:\Users\Acer\node_modules folder and npm start worked for me !!

It is due to the node module dependency conflict.
Delete the node_modules folder from C:\Users\Acer directory. It will resolve the issue.

I tested many ways including delete the node_modules folder but it didn't work , perhaps the best one is to delete the current version of node.js and reinstall it..it answered for me ,i hope it works for you too.

I solved this problem by switching from npm to yarn
Just delete the node_moduelsfolder and the package-lock.json file (not the package.json file). After that just try yarn to install all the packages and here you go.
installation for yarn:
https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

In your case, C:\Users\ Delete any node_modules folders outside its parent projects folder in the directory folder. Worked for me.

must have to follow all these steps :
curl -sL https://deb.nodesource.com/setup_13.x -o nodesource_setup.sh #installation purpose.
sudo bash nodesource_setup.sh
sudo apt-get install nodejs -y
sudo apt update
sudo apt-get update
npm install -g create-react-app
create-react-app --version
create-react-app hello-react
happy coding!

I've created a .env file and then I added this command==> SKIP_PREFLIGHT_CHECK=true
to the .env file! It works for me!

Related

npm start is showing an issue with babel-eslint version

When i ran npm start command to start server for my react app created using npx create-react-app my-app, The following error is occuring.Please help me with the solution to clear the following bug.I have also tried all the steps mentioned below by it but the error was not cleared.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "10.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
C:\Users\LENOVO\node_modules\babel-eslint (version: 9.0.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\LENOVO\node_modules\babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactapp#0.1.0 start 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\LENOVO\AppData\Roaming\npm-cache\_logs\2020-07-19T12_53_40_050Z-debug.log
create your application outside the Desktop folder.
This is because of the package versions installed in user directory. The line from the error mentions the overriding version in the global user directory.
C:\Users\LENOVO\node_modules\babel-eslint (version: 9.0.0)
Try updating the version in the node_modules folder in the user directory or remove these and maintain local node_modules based on each project requirements.
I found a possible solution, or at least this one worked well for me. npm install #babel/eslint-parser and then npm start . If this doesnt work, first try this:
Delete babel-eslint in your node-modules or
Search where you could find that one with npm ls babel-eslint,
I hope works for you. :)

"babel-eslint" can't let me install react

I am setting up a new react App, having installed it, i then added a name to the react app i begin to have a babel-eslint issue
portfolio#0.1.0 start C:\Users\Samson Adedayo\Desktop\portfolio
react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "10.0.2"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
C:\Users\Samson Adedayo\Desktop\node_modules\babel-eslint (version: 10.0.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if C:\Users\Samson Adedayo\Desktop\node_modules\babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 start 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\Samson Adedayo\AppData\Roaming\npm-cache_logs\2019-09-11T18_30_41_153Z-debug.log
Create .env file in your react-app folder and paste below line in it
SKIP_PREFLIGHT_CHECK=true
your problem will get solve
I was having this same issue. Occasionally the create-react-app does not install its dependencies correctly. To solve this I did the following:
delete the node modules folder
delete package-lock.json (NOT PACKAGE.JSON)
manually add the babel-eslint to your package.json
To do this add "babel-eslint": "10.0.2" to the end of your
dependencies list
finally, run npm i and you should be good to go

I can't start the project as it shows error while using the command 'npm start'

Below is the issue I am dealing with while I am starting the project with the command line 'npm start'
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"webpack": "4.28.3"
Don't try to install it manually: your package manager does it
automatically. However, a different version of webpack was detected
higher up in the tree:
/Users/sattys/node_modules/webpack (version: 4.29.0)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /Users/sattys/node_modules/webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jvm-configuration#0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jvm-configuration#0.1.0 start 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/sattys/.npm/_logs/2019-04-04T12_30_29_925Z-debug.log
Have you tried the suggestion is the error message?
First Try:
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
If that doesn't work try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /Users/sattys/node_modules/webpack is outside your project directory. For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack in your project folder. This will tell you which other package (apart from the expected react-scripts) installed webpack.
npm install terser#3.14
try installing this library,hope it should work
1)Ensure that you are running the same version of Node as the other system where it was seen running perfectly. You can test this by entering the following on your terminal and the terminal it was working on: node -v. If they're different, look to upgrade (or indeed downgrade) your installation.
2)Delete the node_modules and package-lock.json directory from the project root on your current computer, then run an npm install to ensure that the binaries that were compiled are compatible with your operating system.

Error running React App "about the webpack"

I'm using create-react-app. When I run npm start, I get the error below.
I've tried all the steps given by the terminal (see below). It just doesn't work. I have also tried to uninstall and install webpack, but no luck so far. How can I fix this?
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected
higher up in the tree:
/Users/seertech/node_modules/webpack (version: 4.23.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this
message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/seertech/node_modules/webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight
check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-client#0.1.0 start: react-scripts start npm ERR! Exit
status 1 npm ERR! npm ERR! Failed at the react-client#0.1.0 start
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
This is because an NPM package was installed in a folder above this one, likely in error. To remedy, start at the project folder and cd ../ into the above folder, do ls. If you see a node_modules folder that shouldn't be there, delete it. If not, cd ../ again and ls again. Repeat until you find the offending node_modules and delete it.

eslint error on deployment on local server of react web app

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "5.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
D:\chintu\blog-exambunker-master\blog-exambunker-master\node_modules\eslint (version: 5.6.1)
how to install the version 5.6.0 I am installing the eslint it always gets installed with the latest version, can someone suggest me what to do?
The error is an incompatibility between eslint and babel-eslint versions. To do solve this, firstly you need to remove your eslint package using npm uninstall eslint. This command will delete your eslint package. After this, you need to install the 5.6.0 version of eslint, so write this command npm i eslint#5.6.0. I hope that this will be helpful for you. Also, you can delete your node_modules folder and then install it.
(Do not do what I did if you don't read everthing I posted) At least with me, I just downgraded my eslint 5.8.0 to 5.6.0 (manually). Why? Because when I use some eslint library like airbnb, it installs the latest version of eslint (5.8.0) automatically, the problem here is that this version has conflict with the previous eslint version used by react (5.6.0), so when you downgrade, you just return to the previous eslint installed, so it's working fine here, but you've to be careful when you update your react version.
I searched where the eslint was with:
npm ls eslint
then I deleted it with:
npm uninstall ls eslint
Finally I ran
npm start
and it worked.
Create a file .env in your root directory.
And you can ignore the check by putting
SKIP_PREFLIGHT_CHECK=true
in .env file.
Ref: https://github.com/facebook/create-react-app/issues/5247#issuecomment-427221678
Edit: This is not the solution to this problem. It is just to ignore the error as it is discussed in the issue.
I have the exactly same problem. I have tried everithing from those Suggestions:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove eslint from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if C:\Users\User\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
nothing worked. every time I am doing npm install/yarn it keeps install the old version of eslint.
ok I find my issue: I had npm packeges and some more crap outside the projects folders (on c:/users/user) they may had the old version of eslint. cheack it out and tell me if you still have the problem or not.
I deleted a node modules folder that contained an older version of eslint. I found this to be the easiest solution rather than changing dependencies.
What solved this for me, was that in the error message, it told me that there was eslint installed in project with 5.6.0 and another installed in users/andrew/nodemodules/eslint with a version of 4.1.6 I tried doing a npm uninstall -g eslint but that didnt work so then I just searched for all the files and folders within users/andrew/nodemodules/eslint
and deleted them, and it worked for then.
I'm not sure if this is a good way to do it, but its worked.
Simple delete package-lock.json and node_modules then run npm install then
npm start
else you could install
npm i eslint#5.6.0 then
npm start
enjoy your work :)
List item
Open a NEW terminal window within root.
Run the command
npm ls eslint
this should show you the installations that are 'higher' up the dependency tree.
Navigate into the folder(s) that contain gulp-eslint/eslint/babel-eslint or even a sneaky node_modules/ that shouldn't have been installed globally.
Next, run either or all of these commands depending on where the files are situated.
rm -rf node_modules/
rm -rf (name of other folders like eslint/gulp-eslint)
RETURN TO YOUR PROJECT
Better to be safe than sorry, run the following commands to make sure it will work properly again.
Within the root directory of your project
rm -rf node_modules/
rm -rf package-lock.json
(If it didn't remove the node_modules just delete it from your folder)
Finally, Run the following.
npm install
then
npm start
go to node_modules folder and open react-scripts/package.json , find the eslint dependencies and change it. its fixed this way.
https://github.com/wesbos/eslint-config-wesbos/issues/17
In the above mentioned link they suggested to install #abhijithvijayan/eslint-config as peer dependency. See if this works for you.
you might install a global eslint like this
{22:14}~/go/src/github.com ➭ npm ls eslint
/Users/demon
└── eslint#6.1.0
then run
{22:14}~/go/src/github.com ➭ npm uninstall eslint
in the global terminal instead of vscode's terminal. then run
npm start
I just used this command: "npm uninstall eslint". Later I just ran mu=y code using npm run start and it worked. I did not have to delete or edit any file
Add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "5.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/Users/macbook/node_modules/eslint (version: 3.19.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /Users/macbook/node_modules/eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app#0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app#0.1.0 start 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/macbook/.npm/_logs/2018-11-01T15_26_42_405Z-debug.log

Resources