Have to reinstall node_modules every time I install a package

Question

I have two questions concerning react.js:

1. I am using npx create-react-app xxx to initialize my project, and each time I get the error while doing yarn 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! [email protected] start: `react-scripts start`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] 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.

2. Every time I install a new package/library in my project, 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"
    ]
  }
}

Answer 1

1. try not to combine the packet managers - they do not tend to work together (the lock information is not synchronized); if you tend to use yarn for starting the scripts then use the yarn for packet management also
2. files don't usually disappear from node_modules, could be some antivirus action on your machine, thou i highly doubt this
3. check in corresponding lock file (package-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 modules

Answer 2

Are you using latest version of NPM/Yarn?

1. Choose one, it's not good to have two package managers in the same project.

2. Delete package-lock.json if you chose yarn or delete yarn-lock if you chose npm.

3. Delete node_modules folder

4. Update the chosen one to the latest version:

   npm install --global yarn

   npm install --global npm

5. Install all packages using one:

   yarn

   npm install

6. Then install lodash.template using the chosen:

   yarn add lodash.template

   npm install lodash.template

7. Try running your project again. The steps are simple, but a clean project makes difference.