after npm install -g create-react-app command is not working? - reactjs

after completing create-react-app command it shows :
added 1951 packages, and audited 1952 packages in 3m
135 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities.
it only shows 1 folder and 2 JSON file:
node modules.
package-lock.json
package.json.
Contents of package.json:
{
"name": "app-ok",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3"
}
}
script written. no script tag or any other.
and after giving 'npm start' command, I get a "script-start missing" error. I have been searching a lot on google but cant figure it out what is wrong.
I have uninstalled node 2-3 times and tried to do it in proper way again and again but nothing is working.
The error is:
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path E:\react\1stapp/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'E:\react\1stapp\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\HP\AppData\Local\npm-cache\_logs\2021-04-15T06_10_59_725Z-debug.log

Related

Eslint in React not correcting errors

I am working on a project that runs on node 10, "react": "^17.0.1".
"react-scripts": "^4.0.1",
On each project start is shows many warnings, for example usage o == instead of ===, etc.
Here is part of the scripts, start original, the other 3 added by me trying to find a solution:
"scripts": {
"start": "env-cmd -f .env.dev --use-shell \"react-scripts start\"",
"lint": "eslint src --ext .js,.jsx",
"lint:fix": "npm run lint -- --fix",
"eslint": "eslint \"src/**/*.{js,jsx}\" --fix"
},
I wanted to run eslint to automatically fix warnings. I tried the commands:
eslint "src/**/*.{js,jsx}" --fix
npm run eslint;
npm run lint
No matter what command I run I get such error message:
✖ 312 problems (3 errors, 309 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company#1.0.0 lint: `eslint src --ext .js,.jsx`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the company#1.0.0 lint 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/myname/.npm/_logs/2022-04-14T12_48_51_948Z-debug.log
Or:
✖ 312 problems (3 errors, 309 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company#1.0.0 lint: `eslint src --ext .js,.jsx "--fix"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the company#1.0.0 lint 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/myname/.npm/_logs/2022-04-14T12_57_18_764Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! company#1.0.0 lint:fix: `npm run lint -- --fix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the company#1.0.0 lint:fix 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/myname/.npm/_logs/2022-04-14T12_57_18_794Z-debug.log
in the package.json there is this info:
"eslintConfig": {
"extends": [
"react-app"
]
},
No eslink packages installed in package.json - is should be using the react-scripts embedded eslint.
Does anybody have a clue how to make eslint fix a plenty of warnings nobody cared about?
EDIT:
Maybe this error appears after the list of warning, because in the middle there are also few errors such as:
here path to the file
10:41 error React Hook "useState" is called in function "betaBanner" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks
EDIT 2:
Yes, after I manually corrected the two errors it now writes in yellow ✖ 309 problems (0 errors, 309 warnings) and the error at the end disappeared.
Sometimes reinstalling the node_modules fixes such issues for me.
These are the steps I follow:
Clean npm cache : npm cache clean --force
Delete the node_modules folder and package-lock.json file.
Do a fresh package install : npm install
Start project : npm start
For VS Code, you can try adding these settings in your VS Code settings.json
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.fixAll.stylelint": true
},
Add this config to your .eslintrc configuration file
"react-hooks/exhaustive-deps": [
"warn",
{
"enableDangerousAutofixThisMayCauseInfiniteLoops": true
}
]
Read more about the issue here https://github.com/facebook/react/issues/18235#issuecomment-898636301

`npm run storybook` failing on fresh react project

I ran npx sb init to install in a fresh React application created by npx create-teact-app blah
When I attempt to run npm run storybook I get the following errors
ModuleNotFoundError: Module not found: Error: Cannot find module 'E:\Development\avask\blah\node_modules\react-refresh\index.js'. Please verify that the package.json has a valid "main" entry
at E:\Development\avask\blah\node_modules\webpack\lib\Compilation.js:925:10
at E:\Development\avask\blah\node_modules\webpack\lib\NormalModuleFactory.js:401:22
at E:\Development\avask\blah\node_modules\webpack\lib\NormalModuleFactory.js:139:22
at _next0 (eval at create (E:\Development\avask\blah\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at eval (eval at create (E:\Development\avask\blah\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:1)
at E:\Development\avask\blah\node_modules\react-dev-utils\ModuleNotFoundPlugin.js:136:17
at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:158:9
at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:113:7
at CaseSensitivePathsPlugin.fileExistsWithCase (E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:83:5)
at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:106:10
at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:67:5
at E:\Development\avask\blah\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
at processTicksAndRejections (internal/process/task_queues.js:77:11)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! blah#0.1.0 storybook: `start-storybook -p 6006 -s public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the blah#0.1.0 storybook 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! C:\Users\TheBritishAreComing\AppData\Roaming\npm-cache\_logs\2021-10-04T15_59_44_158Z-debug.log
My package.json devDependencies are
"devDependencies": {
"#storybook/addon-actions": "^6.3.9",
"#storybook/addon-essentials": "^6.3.9",
"#storybook/addon-links": "^6.3.9",
"#storybook/node-logger": "^6.3.9",
"#storybook/preset-create-react-app": "^4.0.0",
"#storybook/react": "^6.3.9"
}
and I've done npm ls react-refresh it looks like it's being pulled in by #storybook/react#6.3.9
When i look at the package.json for node-modules/react-refresh
I see
"license": "MIT",
"main": "index.js",
"name": "react-refresh",
But there is no file "index.js" in the package folder, I understand the issue but not sure how I resolve it.
I've tried using an earlier version of storybook but the problem persists.
Looking through the react-refresh repo, it looks like this was fixed in a later version.
doing npm install --save-dev react-refresh resolved it

Trying to install webpack 5 with react 17 for module federation, getting this error on npm install

I have a react app created with cra. I want to install webpack in order to setup module federation.
I am getting this error on running the below command:
$ npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netlify-foot#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"~0.9" from webpack-server#0.1.2
npm ERR! node_modules/webpack-server
npm ERR! dev webpack-server#"*" 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.
npm ERR!
npm ERR! See C:\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\AppData\Local\npm-cache\_logs\2021-06-05T15_25_05_470Z-debug.log
package.json
{
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
}
What is the issue? How to get this working?
Your install command is:
npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
This means, it tries to add the following six packages:
webpack#5.24.0
webpack-cli
webpack-server
html-webpack-plugin
babel-loader
webpack-dev-server
But webpack-server is not a thing. Remove it.
If you look closely at your error message, it kinda tries to tell you the same thing:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"~0.9" from webpack-server#0.1.2
It says that it fails to satisfy dependencies caused by this webpack-server. Make sure to get rid of it. That will at least fix this problem.
Your next problem
NOTE however, that for further customization of CRA's webpack build, given you don't want to eject, you also need a way to override it's default build settings.
For that, you might want to check out CRACO.
CRACO (like Webpack Module Federation) does not have very good documentation, but it has a few webpack-related examples here.

npm ERR! Windows_NT 6.1.7601: ENOENT: no such file or directory

So I just created my new Angular application and whenever I restore my packages by right-clicking package.json file and selecting Restore Packages option, I get these npm errors below. How do I resolve them?
I had a look at this link Npm Error - Windows NT - How to resolve but the solutions provided are based on the user's specific OS registry information.
I'm using a 64-bit OS. Running VS 2015 Update 3. I have Node JS installed and running the following commands confirms this:
node -v: v6.10.3
npm -v: v3.10.10
Unrelated third check:
TypeScript is installed and is VS is running 2.3.3.0
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! path C:\Users\Linda\Angular2Test\Angular2Test\Angular2Test\node_modules.staging\source-map-support-b3871625
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\Linda\Angular2Test\Angular2Test\Angular2Test\node_modules.staging\source-map-support-b3871625' -> 'C:\Users\Linda\Angular2Test\Angular2Test\Angular2Test\node_modules\source-map-support'
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules.staging\source-map-support-b3871625' -> 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules\source-map-support'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Linda\Angular2Test\Angular2Test\Angular2Test\npm-debug.log
angular-quickstart#1.0.0 C:\Users\User\Angular2Test\Angular2Test\Angular2Test
After going over Unable to npm install my package here are the following checks I did:
I have a package.json file and it is not misspelled.
I checked my devDependencies and the version that package.json file is running on seems to be 1.0.0 (run on via the lite server)
Here is my devDependencies of my package.json file:
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36"
},
"repository": {}
The error does state that this is not a problem with npm but it not being able to find a file. What file is this?
UPDATE:
I noticed that the .staging folder is none existent in my project directory as per the below error.
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules\.staging\source-map-support-b3871625' -> 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules\source-map-support'
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules\.staging\source-map-support-b3871625' -> 'C:\Users\User\Angular2Test\Angular2Test\Angular2Test\node_modules\source-map-support'
I simply ran the following command and the error(s) went away.
npm install -g grunt

nodejs Couldn't read dependencies when triggering "npm install"

I'm getting the below error.
D:\Ashley\nodejs>npm install
npm ERR! install Couldn't read dependencies
npm ERR! package.json ENOENT, open 'D:\Ashley\nodejs\package.json'
npm ERR! package.json This is most likely not a problem with npm itself.
npm ERR! package.json npm can't find a package.json file in your current directory.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "D:\\Ashley\\nodejs\\\\node.exe" "D:\\Ashley\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Ashley\nodejs
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! path D:\Ashley\nodejs\package.json
npm ERR! code ENOPACKAGEJSON
npm ERR! errno 34
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\Ashley\nodejs\npm-debug.log
npm ERR! not ok code 0
npm install command installs node packages wich are written in package.json file for example you have package.json :
{
"name": "application-name"
, "version": "0.0.1",
"main": "app.js"
, "dependencies": {
"express": "*"
, "jade": "*"
,"cookie-parser":"*"
},
"scripts": {
"start": "node app.js"
}
}
when you write npm install it will install dependencies express jade and cookie-parser
you recieve this error because you have no package.json so if you want to install this packages without package.json you have to write:
npm install express
npm install jade
npm install cookie-parser
It is certain from the type of error you get that you do not have a package.json file at the directory in which you type npm install.
You should first use npm init which creates the necessary package.json file and then type npm install.

Resources