I created a React app, and to check the behaviors for Gemfile and package.json, I changed one line in package.json from
"react": "^16.14.0",
to
"react": "^17.14.0",
as of writing, React 17 doesn't exist yet. But
npm start
and
npm run-script build
both still work. Both yarn start, yarn build also worked. To compare the behavior, when I do rails start with a modified Gemfile with some version of rails that doesn't exist (such as Rails 7.0), it won't start at all. How does this work with npm and package.json?
The user defined scripts start and build are executed but they don't trigger yarn/npm to inspect the dependency tree.
Node itself will load the package name from node_modules/. Package versions are not inspected at runtime.
An npm install or yarn will fail as they will attempt to install the missing package.
Related
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 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.
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
So I'm in the process of publishing a package to npm. It is basically just a simple module that lets users make Ajax calls and can be configured in a few ways.
I have read that it is a good idea to test the install locally and tried that. I have packed the package via the "npm pack" command, change into another directory and then tried installing the packge via "npm install path-to-file-that-was-just-created.tgz".
So far everything works, I have a node_modules folder, that contains my bundled code.
However, is also has installed all the dependencies that I have listed as devDependencies in the package.json of my actual module, even though the only the bundled file is needed and no other depenedencies are defined.
I have tried updating the npm-shrinkwrap.json, and checked that every dependency has the dev property marked as true.
The goal is actually for the user to install this module and then have no dependencies installed, because they do not need babel or mocha, to run the module.
How can I exclude these from the packge?
Thanks!
https://docs.npmjs.com/cli/install
use the --production flag to avoid installing dev dependencies
For published modules, you don't need to do anything, when a user installs your library, only the non-dev dependencies will be installed
If you want your published module to have no dependencies but you still need to have some to build it you can also try to use this command before publishing:
npx json -f package.json -I -e "delete this.devDependencies"
This way only works in CI/CD.
Update: it turned out that npm pkg delete devDependencies does the same without any additional dependency
After running your install, you can prune dev dependencies by running this command:
npm prune --production
this will keep only production dependencies. Documentation from npm here:
If the --production flag is specified or the NODE_ENV environment
variable is set to production, this command will remove the packages
specified in your devDependencies
As I started to develop my first nodejs express application, I added many packages with npm.
I would like to know if there is a way to generate a package.json file containing all the current dependencies or the list of the current packages under the nodes_modules directory.
Just run npm init in the same directory as your project.
You'll be asked a list of questions (name, version, description, etc.) and once complete, it will generate a package.json file with all of the dependencies as currently installed in the node_modules directory.
Run npm list to see what you have installed. Run npm shrinkwrap to build a npm-shrinkwrap.json file, which you can use as a starting reference to build a proper package.json. My workflow is always to update package.json and then run npm install. I never run npm install foo to get some package because it creates risk of forgetting to add it to package.json and then having your application fail to start on deployment.
Updated to add: These days I do run npm install --save foo or npm install --save-dev foo since I have now decided the ~0.4.3 version numbers it adds to package.json are better than my former preference for 0.4.x since the ~ gives you a more precise minimum version number.