Hi, I am learning React-Router and I can’t install package.Json dependencies for some reason. When I run $npm install, I only get errors and can’t seem to wrap my head around them…
Post your package.json and errors here, it will help with debugging!
My bad. Sorry. I also tried cleaning the cache with npm cache clean --force, but still had the same problem.
PACKAGE.JSON:
{
“name”: “tech-news”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@reduxjs/toolkit”: “^1.8.6”,
“@testing-library/jest-dom”: “^5.16.5”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^14.4.3”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-markdown”: “^8.0.3”,
“react-redux”: “^8.0.4”,
“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”
]
}
}
ERRORS:
$ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\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\korisnik\AppData\Local\npm-cache_logs\2023-05-25T17_07_42_773Z-debug-0.log
Can you confirm that a package.json file does exist in the \CodeCademy\react-router\ folder?
If it doesn’t, navigate to the project directory (\CodeCademy\react-router) in your terminal and run:
npm init
Then you can install packages as needed.
It’s actually in (\CodeCademy\react-router\starting_code). Can I just move it outside of the starting_code folder or should I navigate as You said and run npm init?
Oh, yes. Go to the starting_code folder and try npm install from there.
This may do the trick. As far as I know, you run npm install to update packages from the directory where package.json exists
I navigated to the folder where my package.json was and ran ‘npm init’ but nothing changed. The same messages come up. Should I maybe navigate all the way to the package.json and then run npm init?
It worked, I ran init instead of install so glad that I double-checked. Thanks!
So sorry to bother but one more problem came up. When I ran npm start, the page couldn’t load and it says ‘This site can’t be reached!’ ps.s it’s not my internet connection I checked it immediately. Any ideas?
Did you confirm you are connecting to the correct port? In your terminal, make sure it is http://localhost:3000 - or whichever port # it says.
If that is fine, please post what it says in your terminal after you run npm start
This is what it says:
$ npm start
[email protected] start
Starting the development server…
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\util\createHash.js:90:53)
at NormalModule._initBuildHash (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:386:16)
at handleParseError (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:434:10)
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:466:5
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:327:12
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\react-scripts\scripts\start.js:19
throw err;
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\util\createHash.js:90:53)
at NormalModule._initBuildHash (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:386:16)
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:418:10
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\webpack\lib\NormalModule.js:293:13
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\korisnik\Desktop\Web Development Kurs\CodeCademy\react-router\starting_code\node_modules\babel-loader\lib\index.js:51:103 {
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
}
Node.js v18.12.1
I googled one possible solution which is to upgrade the react-script. So I am trying to wrap my head around that at the moment since it requires me to basically uninstall and delete everything first.
Fixed it! I uninstalled react-script and then installed it again and it worked. Thanks for the help!
Excellent! Glad you got it sorted.