Facing an issue after cloning React repo - node.js

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,

Related

How to prevent npm from resolving devDependencies on production install

I'm building a microservice app in a monorepo containing a bunch of microservices and a commons package. This commons package is never published to npm. (packages are managed with yarn workspaces)
Using parcel, the commons package is bundled into the production code, so I don't need to install it at run time.
Each microservice runs in its own docker container. So, when I build the docker container, Ideally, I'd want to ignore this "commons" dependency and install all the other ones. AFAIK, the only way to do this is to place the "commons" package in devDependencies.
However, it seems that even if I add it only to devDependencies and run npm i --only=production, npm still tries to resolve the package and still throws an ETARGET error.
Is there some way to completely ignore the devDependencies? My only other Idea is to write a script that removes the devDependencies field from the package.json before running npm install, but I wanted to ask here first to make sure I'm not missing anything.
There is a GitHub issue on the npm/cli repo tracking this issue here (#4967), where this behaviour is categorized as a bug.
So to answer your question, as far as the current status of the GitHub issue indicates, the intended behaviour is that devDependencies don't get attempted to be resolved in --production mode, and you shouldn't need to do anything extra to get this behaviour once the fix is made. I don't think you are missing anything.
The workaround you have thought of sounds reasonable to me.
On the GitHub issue, you can indicate "me too" with a thumbs up reaction (please don't spam the comments with "me too" comments).
To install packages only at production without devDependencies,
npm install --production
Docs about npm install is here.

npm start not working due to webpack issue

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

Problem with installing react dependencies

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 :)!

React project dependency error while adding webpack

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

Cannot start npm/yarn

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.

Resources