I decided to create React app under Linux and I've used those commands:
npm install -g create-react-app
create-react-app my_app_name
npm start
At this point I've recieved message:
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:
/home/ktw/node_modules/webpack (version: 4.24.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:
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 /home/ktw/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.
I've done literally every step from this list but unfortunately - with no results.
I've already tried:
chown -R user: node_modules,
npm cache clean --force,
rm -rf node_modules && rm ./package-lock.json && npm install
and I have no idea what is going on.
Do you guys have any idea how to fix that?
It looks like you may have forgotten to do Step #3: Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
If you are doing the steps as you outline above, when you do npm install again, because Webpack is still in your package.json, it'll reinstall and continue the issue.
Related
HI there I'm facing an issue after cloning a react repo(attached)-
PS C:\Users\User\Desktop\gfolio> npm start
gfolio#1.0.0 start
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:
"webpack-dev-server": "3.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
C:\Users\User\node_modules\webpack-dev-server (version: 3.11.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 "webpack-dev-server" 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\User\node_modules\webpack-dev-server is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls webpack-dev-server in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.
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!
I tried to fix it through the above method but not working,
I had installed expo globally to learn react-native seeing a tutorial.
Now when I'm trying to make a new react app and run npm start I'm getting the following message.
yarn start
yarn run v1.22.4
$ 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:
"webpack": "4.42.0"
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:
/home/nikunj/node_modules/webpack (version: 4.43.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 "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 /home/nikunj/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!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried several approaches to solve the problem.
Firstly i followed the first 4 steps in the error message but they did'nt work out as when i did
npm ls webpack
it returned
/home/nikunj
└─┬ expo-cli#3.24.2
└─┬ #expo/xdl#57.9.31
├─┬ #expo/webpack-config#0.12.25
│ └── webpack#4.43.0 deduped
└── webpack#4.43.0
Then I uninstalled expo-cli globally using
yarn global remove expo-cli
but even if i do that it is still giving me the same tree for npm ls webpack.
I also tried doing npm rm home/nikunj/expo-cli#3.24.2 but that is not solving the problem as still i get the same tree on npm ls webpack
I am trying to install react using this command: npx create-react-app .
Then I tried to run using this command: npm run start
Then I get this error:
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-dev-server": "3.10.3"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
C:\Users\oa\Desktop\node_modules\webpack-dev-server (version: 3.11.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.
As suggested here [https://stackoverflow.com/questions/42308879/npm-err-code-elifecycle][1] ,
I have tried to fix it using the following commands:
delete package-lock.json
npm cache clean --force
npm install
npm start
But did not fixed for me.
Just to let you know, my npm version is 6.13.6, and node version is v13.8.0
Try to create a .env file in the root directory of the project and add this line SKIP_PREFLIGHT_CHECK=true inside the file.
then try to run yarn start or npm start.
Did you give a project name after npx create-react-app 'appName' ?
If you have multiple node_modules folders with different versions of dependencies one may conflict with the other - do the following:
Follow steps 1-4 that are initially provided in project directory and commit updated changes locally~
i. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
ii. Delete node_modules in your project folder.
iii. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
iv. Run npm install or yarn, depending on the package manager you use.
Find the location of the node_modules folder that is not in your project folder ~ this line - (C:\Users\oa\Desktop\node_modules\webpack-dev-server)
Go there and delete it
once done try npm start
should work :)!
i have installed webpack with below command
yarn add webpack --dev
and after i ran yarn start command inside my react app folder
D:\Workspace\fuel-man-ui\fuel-man-ui>yarn start
Getting below error.
yarn run v1.19.0 $ 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:
"webpack": "4.29.6"
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:
D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\webpack (version:
4.41.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 D:\Workspace\fuel-man-ui\fuel-man-ui\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!
error Command failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command.
i have deleted node_modules from my project and devdependencies, also i have removed global node_modules and cache. still getting same error.
I ran npm ls webpack and got below tree
fuel-man-ui#0.1.0 D:\Workspace\fuel-man-ui\fuel-man-ui
+-- react-scripts#3.0.1
| `-- webpack#4.29.6
| `-- webpack#4.41.0 extraneous
`-- webpack#4.41.0
npm ERR! extraneous: webpack#4.41.0 D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\react-scripts\node_modules\webpack\node_modules\webpack
The react-scripts package provided by Create React App requires a
dependency:
"webpack": "4.29.6"
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:
In project root delete node_modules and yarn.lock. In package.json remove webpack from the dependencies and run yarn again.
If you want to modify webpack.config for this project you can run yarn eject from here on you are responsible for the webpack.config so it will be harder to update react scripts.
If you don't want to be responsible for the webpack.config you could try to use react-app-rewired an article on this is here
You should create .env file in the root (not inside src folder) and add SKIP_PREFLIGHT_CHECK=true
Then you can use yarn start or npm start. It works!
Yesterday I had the same issue. In my case it turned out, that I had two installations of node (one using brew, one using downloaded dmg file). It helped when I removed the one installed via brew.
The file .env with added SKIP_PREFLIGHT_CHECK=true
Node.js newbie here, Windows 10. I npm install-ed some packages (without -g) while inside a directory that didn't have package.json. npm placed the packages in C:\Users\{MyName}\node_modules\.
Now I'm seeing some weird behavior:
When I'm in my project directory (has package.json but no node_modules/ yet), npm list and npm list -g both show an empty list
When I'm in a non-project directory (no package.json)...
npm list -g still shows an empty list
However, npm list shows everything in C:\Users\{MyName}\node_modules\
Question 1. What is going on here? Apparently, npm's default global path should be C:\Users\{MyName}\AppData\Roaming\npm\. If so, why is it using C:\Users\{MyName}\node_modules\?
Question 2. How do I get out of this mess? Node.js has no problem importing packages from C:\Users\{MyName}\node_modules\, but I want npm to list them properly. How can I delete the semi-global packages, reinstall them correctly, and ensure that this doesn't happen again?
Welp, turns out I've been mistakenly npm install-ing packages without package.json. The first time I did this, I was in my home directory(C:\Users\{MyName}\). This caused npm to create node_modules/ and package-lock.json in the home directory. Further (mistaken) attempts to install packages in my projects--which were still missing package.json--caused npm to traverse upwards, until it found the initial node_modules/ dir, and install everything there. Because my home directory is among the places Node.js looks for modules, I didn't notice my mistake until now. :P
Not sure why it’s doing it, but the way to avoid it is to initialize your project directory using:
npm init
or if you don’t want to answer the questions:
npm init -y
That will setup the directory with the package.json and node_modules will be put there.
Ok, a couple of tips then...
when you install a package that you are going to use in production then add --save, e.g.
npm install --save some-package
this will automatically add the dependency to your package.json. If you are installing a package for use purely in development, e.g. chai, then use--save-devand it will add it to the development dependencies.
Also, git is your friend, even if you are only messing :)
Happy noding :)
For me the solution here was:
Go to c:\users[me]\AppData\Roaming\npm and delete the node_modules folder completely
Make sure I had the package.json file for the project
Delete the project package-lock.json file
Run npm init
Run npm install
Project then worked, not sure why the node_modules got to be in the folder above, ain't got time to find out.