I am attempting to install React with Typescript, but I keep getting a weird error.
Please note myprojectname is the root repository directory that I am installing the React app into. For some reason it is trying to resolve myprojectname#0.1.0?
Error
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1355 packages in 1m
171 packages are looking for funding
run `npm fund` for details
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myprojectname#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
My attempts to solve the issue
Clearing then verifying npx cache
Uninstalling create-react-app globally.
Updating npm
Updating node
Running command with and without #latest
Running command with and without --template typescript
Using the --use-npm flag.
Adding --legacy-peer-deps to command.
Modifying command to create the react app in a nested directory.
Command
npx create-react-app#latest . --template typescript --use-npm
Outputs
npm -v > 8.6.0
node -v > v17.8.0
Package.json
{
"name": "myprojectname",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template-typescript": "1.1.3",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"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"
]
}
}
The problem was caused by an issue with the testing library installed by default with React. It may have already been fixed.
Related
I've already launched the project using npx create-react-app. The app opened up in my browser and everything was going great. My computer restarted overnight, and the browser tab hosting the app was closed. I'm trying to re launch the app using "npm start" in the terminal, but I am getting the following error:
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/guaclim/.npm/_logs/2023-01-31T15_34_16_068Z-debug-0.log
Npm start worked just fine when it came to launching the app the first time. I've tried updating and reinstalling npm. My json is also as it should be as far as I can tell :
"name": "new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"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"
]
}
}
I also attempted the following steps but it looks like there was an authorization issue:
npm install -g npm#latest -- to update npm because it is sometimes buggy.
rm -rf node_modules -- to remove the existing modules.
npm install -- to re-install the project dependencies.
The errors i got:
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/npm
npm ERR! dest /usr/local/lib/node_modules/.npm-i9nnxROI
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR! [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'rename',
npm ERR! path: '/usr/local/lib/node_modules/npm',
npm ERR! dest: '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
I am learning docker and I am getting this error when I run
npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Docker Practice\section4-react-app/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Docker Practice\section4-react-
app\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SIBA\AppData\Local\npm-cache\_logs\2022-04-08T10_01_09_620Z-debug-0.log
This is my package.json file showing all the dependencies
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
I am following mosh tutorial to learn docker.
My task is to run npm install so it automatically installs all the dependencies listed in this project but I am getting above error.
Can someone help me out in this.
I know the versions may be old but it's completly fine as docker will run all the code according to the given dependencies.
So, instead of updated version, I need my application to be build with this version of software and then deploy it to docker container.
Looking forward to hear from you.
Source code is present here
Regards,
Ali
You must run the npm install in the directory where package.json is located, the error clearly states that npm cannot find the package.json:
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Docker
Practice\section4-react- app\package.json' npm ERR!
enoent This is related to npm not being able to find a file.
So it must be some issue with the path.
Though to debug this error, the provided information is not enough:
Open up your terminal or cmd and go to the directory where package.json is located (using the cd command)
run the ls command, it will show all the files present in the directory
take the screenshot of your terminal now and post it here
then run npm install and again take a screenshot of your terminal and post it here.
I have node v12.16.2, and npm 7.16.0 running on Mac OS Big Sur 11.5.1.
I just installed a npx react project, with:
npx create-react-app frontend
and this is my package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
When I try to add:
npm i react-router-dom
I get the following error:
npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm WARN tarball tarball data for
hoist-non-react-statics#https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
(sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==)
seems to be corrupted. Trying again. npm ERR! code ENOENT npm ERR!
syscall lstat npm ERR! path
/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07
npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory,
lstat
'/Users/sven/.npm/_cacache/content-v2/sha512/fe/01/a2bf18bc24f296366fd6d234a6cdc30fa5fa4f2dcddd63fe86c615f6850f621a3dda0df925578113ecd8caa528a72e9279bda7daf62886204660d7449f07'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/sven/.npm/_logs/2021-08-02T09_21_43_877Z-debug.log
What could this issue be about: incompatible versions of node or npm for npx create react app?
npm cache clean
npm i react-router-dom --save
I don't know which directory you are running the second command from but you need to be in the project directory (same dir as package.json). cd frontend before the second command.
This is the error :
my-app#0.1.0 start /home/gaurav/Desktop/Django + React/Saurav Hardware/saurav_hardware/my-app
react-scripts start
sh: 1: react-scripts: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! my-app#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the my-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /home/gaurav/.npm/_logs/2020-05-20T20_38_00_671Z-`enter code here`debug.log
[// This is my package.json]
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is happening everytime I try to start npm. It was working fine yesterday but it stopped totally.What should I do? What is missing in this package.json file? I also can't be able to install node modules.......!
You haven't installed all of your modules. Run npm install to install the modules specified in package.json and then npm start should work. Note from the error message that react-scripts is not found, which is your clue that the package is not installed
I see the question has been asked before but none of the solutions seems to help me.
Error that I am getting, I tried to remove the node_modules directory as well. And then reinstalled npm. Still the same error.
rm -rf node_modules
npm install
npm start
-- same error
Even tried deleting the package-lock.json, but same error on npm start.
Node version - v10.15.3
NPM version - 6.4.1
Aryans-MacBook-Pro:react-new-app aryanarora$ npm start
> react-new-app#0.1.0 start /Users/aryanarora/Desktop/The Web Developer Bootcamp/01 All Practice Files /js<:>/Jon Duckett/react-new-app
> react-scripts start
sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-new-app#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-new-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/aryanarora/.npm/_logs/2019-04-29T06_08_07_273Z-debug.log
After doing npm list --depth 0 | grep react-scripts
output as follows:
Aryans-MacBook-Pro:react-new-app aryanarora$ npm list --depth 0 | grep react-scripts
└── react-scripts#3.0.0
npm ERR! peer dep missing: typescript#*, required by #typescript-eslint/eslint-plugin#1.6.0
npm ERR! peer dep missing: typescript#*, required by #typescript-eslint/parser#1.6.0
npm ERR! peer dep missing: typescript#*, required by #typescript-eslint/parser#1.6.0
npm ERR! peer dep missing: typescript#*, required by #typescript-eslint/typescript-estree#1.6.0
npm ERR! peer dep missing: typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev, required by tsutils#3.10.0
npm ERR! peer dep missing: typescript#*, required by #typescript-eslint/typescript-estree#1.6.0
npm ERR! peer dep missing: typescript#*, required by ts-pnp#1.1.2
Package.json File
{
"name": "react-new-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Please make sure React-scripts node module installed, to check this, please do below steps.
install npm install again
Go to node_modules --> react-scripts (make sure folder exists)
Run npm start
It may be the issue of npm version. Please try some suggestions.
Uninstall yarn npm uninstall -g yarn
Do a cache clean. npm cache clean -f
If still doesn't work, try to downgrade/upgrade your npm version to npm 5.4.2 or npm 5.3.*.
npm install -g npm#5.4.2
The problem could be the node and npm itself.
Try to uninstall node from your machine completely by using Homebrew or NVM, whichever you used to install node. Else you have to do it manually.
Follow the steps in this link - https://stackabuse.com/how-to-uninstall-node-js-from-mac-osx/
Next install the LTS node from the official website (https://nodejs.org/en/), this should solve the issue.
One thing i also found out to be helpful was to change the directory. My directory had folder named "</>js" which I beleive created some issues.