I have two questions concerning react.js:
- I am using
npx create-react-app xxxto initialize my project, and each time I get the error while doingyarn start
Error: Cannot find module 'lodash.template'
Require stack:
- C:\Desktop\react\myapp\node_modules\workbox-build\build\lib\populate-sw-template.js
- C:\Desktop\react\myapp\node_modules\workbox-webpack-plugin\build\generate-sw.js
- C:\Desktop\react\myapp\node_modules\workbox-webpack-plugin\build\index.js
- C:\\Desktop\react\myapp\node_modules\react-scripts\config\webpack.config.js
- C:\Desktop\react\myapp\node_modules\react-scripts\scripts\start.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\vanst\OneDrive\Desktop\react\myapp\node_modules\workbox-build\build\lib\populate-sw-template.js:10:18)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19) {
code: 'MODULE_NOT_FOUND',
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp@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! C:\Users\AppData\Roaming\npm-cache\_logs\2020-10-28T16_45_32_029Z-debug.log
I was able to fix this by running npm install loadash --save, but I have to manually install this module every time.
- Every time I install a new package/library in my project,
yarn startwon't work correctly (usually it will report that some module is missing) unless I reinstallnode_modules.
Have anyone encountered similar problems?
Update 1: problem 1 can also be solved by deleting node_modules and reinstalling it. However, I still do not know what is causing it and why doing this works.
Update 2: This is how my package.json looks like when I first initialize a project:
{
"name": "temp",
"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"
]
}
}