Have to reinstall node_modules every time I install a package

Viewed 2760

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! 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.

  1. 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"
    ]
  }
}

10 Answers
  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

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.

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?

Please 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

You can use the npm ci this will remove the node_modules redownload and install them for you. All in a single command. You can read more about it here

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:

  • import it
  • import its sub dependencies
  • auto delete anything it has listed as "unneeded"

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.

Related