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
Related
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
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.
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
I tried to run npm start to a React app that it was working perfectly, but now for some reason is not working. The mesage I recive is the following:
Error: Cannot find module 'C:\Users\albat\Desktop\personal_projects\alba_virtual_cv\index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! alba_virtual_cv#1.0.0 start: `node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the alba_virtual_cv#1.0.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! C:\Users\albat\AppData\Roaming\npm-cache\_logs\2020-05-11T09_08_43_976Z-debug.log
And my package.json is the following:
{
"name": "alba_virtual_cv",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"debug": "^4.1.1"
},
"devDependencies": {},
"description": ""
}
Please I need help to run the application again.
Thank you.
Run this before starting the project:
npm -i
This installs missing packages
It just means something went wrong when dependencies were installed the first time.
I suggest doing these three steps:
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.
This should fix the problem.
I'm stuck at deploying my reactJS web application to Heroku.
It worked fine on the local machine. I got problems with permission when Build section runs.
I don't know what did I wrong, everything else in this course works fine.
I tried to deploy the app with GitHub connection, but I got the same error.
I tried to run this code in terminal NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client, but I got another error (NPM... is not a command).
my package.json file :
{
"name": "contactkeeper",
"version": "1.0.0",
"description": "Contact manager app",
"main": "server.js",
"engines": {
"node": "^12.4.0"
},
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "vinogitz",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.1.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"jsonwebtoken": "^8.5.1",
"lodash.template": "^4.5.0",
"mongoose": "^5.6.3"
},
"devDependencies": {
"concurrently": "^4.1.1",
"nodemon": "^1.19.1"
}
}
my gitignore like this:
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
#client/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
-----> Build
Running heroku-postbuild
> contactkeeper#1.0.0 heroku-postbuild /tmp/build_5e4bd7bd79fb3c0f84bb21cb820d7594
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
audited 902208 packages in 13.316s
found 0 vulnerabilities
> client#0.1.0 build /tmp/build_5e4bd7bd79fb3c0f84bb21cb820d7594/client
> react-scripts build
sh: 1: react-scripts: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the client#0.1.0 build 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! /tmp/npmcache.BWDxV/_logs/2019-07-22T11_55_03_878Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! contactkeeper#1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the contactkeeper#1.0.0 heroku-postbuild 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! /tmp/npmcache.BWDxV/_logs/2019-07-22T11_55_03_893Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
I found the problem. the permission denied is not the perfect error message, but i found the solution.
I tried to ignore the node_modules folder in my client folder with .gitignore, but I didn't find the solution first time, so I just delete the sub folder node_modules from project. After that, I tried to deploy it again, and it's worked. So the real problem was that, the git add, git commit, git push commands pushed the node_modules sub folder to the repository.
PS.: The solution is: write node_modules/ instead of /node_modules in gitignore. With this the node_modules folders in a project (root folder or in a sub folder get untracked.)
Thanks!