I have two questions concerning react.js:
npx create-react-app xxx to initialize my project, and each time I get the error while doing yarn startError: 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.
yarn start won't work correctly (usually it will report that some module is missing) unless I reinstall node_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"
]
}
}
delete node modules and package-lock.json and Run
yarn
There is a difference between the lodash.template package and lodash. If you are missing lodash.template then run:
yarn add lodash.template
Based on your package.json you are missing this dependency. By adding with yarn this will update your package.json and yarn.lock files. The issue will likely be fixed permanently.
When you are running yarn add lodash.template does it appear in your dependency in your package.json?
Maybe yarn cannot write your package.json file? Do you have write access your folder? Maybe npx has created this folder from a root user and you don't any rights to edit?
yarn for starting the scripts then use the yarn for packet management alsonode_modules, could be some antivirus action on your machine, thou i highly doubt thispackage-lock.json for npm, or yarn.lock for yarn) whether the packet manager has installed the dependency; yarn also creates additional .yarn-integrity file in node_modules directory to keep track of the installed modulesPlease delete your node_modules and package-lock.json and follow below commands for lodash.template installation:
$ {sudo -H} npm i -g npm
$ npm i --save lodash.template
Happened to me once too. Installing packages with admin privilege worked for me.
Did you try removing node_modules folder and the clean the npm cache. Try with these commands after delete node_modules folder
$ npm cache clean
$ npm install
Are you using latest version of NPM/Yarn?
Choose one, it's not good to have two package managers in the same project.
Delete package-lock.json if you chose yarn or delete yarn-lock if you chose npm.
Delete node_modules folder
Update the chosen one to the latest version:
npm install --global yarn
npm install --global npm
Install all packages using one:
yarn
npm install
Then install lodash.template using the chosen:
yarn add lodash.template
npm install lodash.template
Try running your project again. The steps are simple, but a clean project makes difference.
One of your require statements is most likely calling a dependency (node module) that lists this as an "unneeded dependency." Any time a dependency is imported,
the package manager will:
This is for situations where a module may be set up to run in multiple environments. The module may import a sub-module for test environment, but specify it as unneeded for production environments.
This is the problem with using multiple package managers. The package manager is designed to ensure that all of your packages work well together. However, if you mix & match, they will often times end up working against each other.