npx create-react-app my-project results in the following dependency errors:
npx version: 8.5.0
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
The command still produces a project directory, but running npm start in the created directory errors with web-vitals missing from node-modules.
Solutions tried
Running the same command with --force or --legacy-peer-deps as suggested by the above error message doesn't solve the problem.
Deleting node_modules and package-lock.json and running npm i also doesn't solve the problem.
Update
The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.
Until this is fixed for now you can delete the node_modules folder and package-lock.json. Next, open package.json and change
"react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g:
"react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, you can run npm install.
Alternative Solution (Try this first!):
solution suggested by joooni1998):
delete both node_modules and package-lock.json
run npm i web-vitals --save-dev
run npm install
and then you can use npm run build and npm start again
Check here for the Github issue.
Here is a temporary workaround:
Install cra-template to a separate folder (other than your new
project app's folder) using "npm install cra-template"
Go to the installed cra-template package folder and in file "template.json" change the line '"#testing-library/react": "^12.0.0"' to '"#testing-library/react": "^13.0.0"'
Go back to your root folder and run npx create-react-app my-app (your app name) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE
Additionally, you can let the build fail, remove the node_modules folder as well as the package-json.lock file. Open the package.json file and change the react and react-dom to an earlier version.
For example:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Delete reportWebVitals.js
Remove import reportWebVitals from './reportWebVitals'; from index.js
Remove reportWebVitals(); from the bottom of index.js
Finally run npm install
It worked for me by deleting both 'node_modules' folder and 'package-lock.json' file. Then, I changed both react and react-dom version to 17.0.2 instead of 18.0.0 inside the package.json file as suggested by Gavriel's answer https://stackoverflow.com/a/71836018/12490294. Then, inside the app folder, I ran
npm i web-vitals --save-dev
Then
npm start
The app started successfully
Or you can try this npx --legacy-peer-deps create-react-app my-appname or goto index.js and remove the usage of web vitals
or downgrade npm with npm install -g npm#8.3.0 and create react app.
You could use yarn add create-react-app your-app instead
Try running either with --force or with --legacy-peer-deps, both will install dependencies without problems.
If that doesn't work, then delete the node modules folder and start installing from scratch
I have this package.json:
{
"name": "natours",
"version": "1.0.0",
"description": "Landing page for natours",
"main": "index.js",
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},
"author": "Robert",
"license": "ISC",
"devDependencies": {
"node-sass": "^6.0.0"
}
}
When I try to run npm run compile:sass it gives me this error:
It worked for a while, but I updated the node version.
Also, if I run this command:
node-sass sass/main.scss css/style.css
From the command line, it works.
Node version: 14.17.0
npm version: 6.14.13
node-sass version: 6.0.0
To fix this I uninstalled node-sass using this commands:
npm uninstall -S node-sass
npm uninstall -D node-sass
npm uninstall -g node-sass
And then install it again globally, using:
npm install -g node-sass
Before installing globally, I tried to install it with -D flag to add it to dependencies or -S flag to add it to devDependencies but it still didn't work, not sure why.
Maybe it's an incompatibility between npm and node-sass versions. I believe it can also be fixed using nvm.
I need to do npm install and link both in single cmd
So I am using
npm install -g NamPkg && npm link NamPkg
Is there any shorthand for this where I can mention NamPkg only once like :
npm install -g && npm link NamPkg
OR
npm install -g && link NamPkg
Bcoz I need to use this in Package.json
and when the list grows more mentioning the same package names twice may become lengthy
"scripts": {
"preinstall": "npm install -g NamPkg && npm link NamPkg"
Is there any shorthand where I can mention NamPkg only once
AFAIK there is no way of doing this either via npm scripts or bash.
I don't know if it fits your use case, but using a variable would save a little typing (in that you would only have to declare the package name once and could copy/paste the rest of the command).
"scripts": {
"preinstall": "pkg='whatever'; npm i $pkg && npm link $pkg"
},
After npm install is run I would like to run
npm run jspm install
I have package.json
"scripts": {
"postinstall" : "npm run jspm install",
"jspm": "jspm"
},
This throws an error since npm run jspm install gets passed to node rather than npm. What's the correct way to do this?
There doesn't seem to be a reason to reference the jspm script. You can refer to jspm directly in the postinstall script:
"postinstall" : "jspm install",
How do I install bower using package.json and npm?
I have my package.json file setup like so..
{
"name": "myprogramname",
"version": "0.0.1",
"devDependencies": {
"bower": "1.2.6"
//other dependencies are listed as well
}
}
from the command line I run
npm install
It installs all of my dependencies in devDependencies except bower. Any reason for this?
Also,
which bower
returns nothing
Npm did actually install Bower but not globally. If you check your node_modules/ directory, it should be there.
Therefore, it IS accessible for other developers at this path:
node_modules/bower/bin/bower
A neater way to use a local install of bower is shown here.
Basically you need to use "npm run bower install" instead of "bower install" if you install bower through NPM locally and don't have it installed globally on your computer.