I installed webpack into my react project, but the same error occurred every time when I use npm start:
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:
C:\react\minimoj\node_modules\webpack (version: 4.43.0)
I tried to remove package-loc.json file + all node_modules + remove webpack name from package.json and reinstall it with npm install. Also I tried same with yarn, but it didn't help. I see that in node_modules version is 4.43 and after I use npm install webpack in the file package-loc.json it shows 4.43, but at the moment when I use npm start it changed to 4.42 and error occur. In addition I also reinstall node.js but it didn't help.
create .env file and add SKIP_PREFLIGHT_CHECK=true
I had similar with a newer webpack version being installed than what react_scripts required.
To fix I deleted webpack and webpack-dev-server from my project's node_modules, went to a console outside of the project dir and ran
npm uninstall webpack
npm uninstall webpack-dev-server
Then ran
npm install
npm run build
And all was well, as my package.json was correct without change.
Since webpack is mostly focused on common js according to some websites, I just tried rollup for my react project and it proved to be much more effective as it supports es+. I would highly recommend it. I took a couple minutes to have everything setup and ready. Also, as a good practice it is better to use yarn as npm has had a lot of known issues for node app management.
Related
I deleted the node modules and package.json.lock file in my client side MERN Stack project folder and tried reinstalling the node modules by typing "npm install" command in the terminal. but it's showing me an error. 1. I have tried clearing cache using "npm cache clean --force".
2. I have tried reinstalling npm using "npm install -g npm".
3. I have tried updating the npm using "npm install -g npm#latest".
But nothing works. Please help me resolve this issue. below are my package.json file and the error in my terminal while installing node modules.
i was expecting that node modules will be reinstalled with all the dependencies mentioned in my package.json file.
NPM changed the way of resolving peer dependencies in v7, but this new way does not allow conflicting dependencies in the dependency tree. The simplest way to solve this would be to use the --legacy-peer-deps option to use the old way of resolving dependencies.
The hard(but better) way to solve it would be to spend some time to update the dependencies in a way that there is no conflicting dependency.
Browsing stack overflow, I noticed that a common fix is make sure that dotenv is in dependencies and not just devDependencies. Here's a screenshot of the log and the package.json. You'll notice that dotenv is indeed in my dependencies. I also deleted and reinstalled node_modules multiple times but still no luck.
I am requiring the dotenv at the top of my server file as shown here
I fixed the issue. I decided to try uninstalling dotenv and reinstalling, this worked. Apparently, this was different from deleting node modules and npm install.
I see dotenv is added to a devDependency: devDependency are special and are only installed when you do a npm install on the package.json which contains them. Usually, you'll add your development tooling (like test runners, etc.) in devDependencies since they are not required for the application to run.
When we run an application in production, we install dependencies using npm install --production which only installs the dependencies mentioned in the dependencies section of package.json. This is also what Heroku does for you (check their buildpack for Node.js!)
To install a devDependency, you would do: npm i -D <package name>; and to install a production dependency (like your web framework like express), you'd do npm i -S express.
Try running npm i -D dotenv and check if it works (it may also work if you just do a npm i dotenv.
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
I am working on a React Native app and suddenly see this :
FAIL Inject RemoteDev monitor into React Native debugger, the file 'react-native\local-cli\server\util\debugger.html' not found.
when i run npm install.
It used to be ok before. I checked the folder AppData\Roaming\npm\node_modules\react-native\local-cli\server\util and the debugger.html file is there.
Here is my package.json script:
"postinstall": "remotedev-debugger"
How can I fix this?
I got this error today after updating to the latest React Native version.
I think you need to update RemoteDev package.
For me, this involved replacing remote-redux-devtools-on-debugger with the latest remotedev-rn-debugger (https://github.com/jhen0409/remotedev-rn-debugger) as the package name had changed.
Upgrade the remotedev-rn-debugger package.
If you use NPM:
npm i remotedev-rn-debugger#latest --save-dev
If you use Yarn:
yarn add remotedev-rn-debugger#latest --dev