npm install/update does not properly install dependencies

What I Wanted to Do

I wanted to update my dependencies to their latest versions. After running npm update I expect that the files package.json and package-lock.json are updated and all new dependencies are installed properly.

What Happened Instead

After running npm update, then package.json and package-lock.json got updated properly, but the dependencies were not installed correctly. When running my unit tests, webpack throws an error that files are missing.

I committed and pushed the new changes to package.json and package-lock.json to my remote git repository. There I have a CI setup that automatically runs the same tests whenever a new commit is pushed. Before the actual tests are run, the command npm install is performed to install any new dependencies over the previous. While it shows that it installs all the new dependencies, they still end up in a broken state and my tests fail.

So npm install and npm update both fail to install the dependencies properly.

In both cases, after deleting the node_modules folder and performing npm install again, the dependencies are now properly installed and my tests pass successfully.

This problem does not seem tied to a specific version of npm or related to the fix in 6.11.3. I tried a few older versions of npm and the problem persists.

Reproduction Steps

  1. Clone the repo https://github.com/MartinManev/npm_problem
$ git clone git@github.com:MartinManev/npm_problem.git
Cloning into 'npm_problem'...
remote: Enumerating objects: 14, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 14 (delta 2), reused 14 (delta 2), pack-reused 0
Receiving objects: 100% (14/14), 105.75 KiB | 0 bytes/s, done.
Resolving deltas: 100% (2/2), done.
  1. Perform npm install to install quasar 1.0.5. Check the package-lock.json.
$ cd npm_problem
$ npm install
(...)
added 1182 packages from 1274 contributors and audited 21087 packages in 5.952s
found 0 vulnerabilities
  1. Make sure the tests pass successfully (There are 0 actual tests for the example, what is important is that Webpack tries to compile the Quasar package)
$ npm run test:unit
 WEBPACK  Compiled successfully in 3125ms

 MOCHA  Testing...



  0 passing (0ms)

 MOCHA  Tests completed successfully
  1. Update dependencies
$ npm update
+ quasar@1.1.0
updated 1 package and audited 21087 packages in 3.437s
found 0 vulnerabilities
  1. The tests should now fail
$ npm run test:unit
 WEBPACK  Failed to compile with 1 error(s)

Error in ./node_modules/quasar/src/components/menu/QMenu.js

  Module not found: './menu-tree.js' in '/home/manev/proj/npm_problem/node_modules/quasar/src/components/menu'

 ERROR  mocha-webpack exited with code 1.
  1. Delete the node_modules folder and perform npm install again
$ sudo rm -r node_modules
$ npm install
added 1182 packages from 1274 contributors and audited 21087 packages in 5.915s
found 0 vulnerabilities
  1. The tests pass successfully again: npm run test:unit
$ npm run test:unit
 WEBPACK  Compiled successfully in 3125ms

 MOCHA  Testing...



  0 passing (0ms)

 MOCHA  Tests completed successfully

Details

Platform Info

$ npm --versions
{ npm: '6.11.3',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  modules: '64',
  napi: '4',
  nghttp2: '1.39.2',
  node: '10.16.3',
  openssl: '1.1.1c',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '6.8.275.32-node.54',
  zlib: '1.2.11' }
$ node -p process.platform
linux

I reproduced the steps.

I did not work out whether menu-tree.js is a source file, or something generated by a post-install script or similar which is not getting called for the update workflow.

Hi, shadowspawn,

menu-tree.js is part of the source for Quasar 1.0.5, but is removed in Quasar 1.1.0.

In 1.0.5 it is referenced in QMenu.js:

import { MenuTreeMixin, closeRootMenu } from './menu-tree.js'

I suspect the problem may be a stale test with cached state, and not the npm install. I looked at the quasar folder after the install, after the update, and after the reinstall, and looked as I expected in each case.

To test my theory, I followed these steps and the tests ran without error:

git clone https://github.com/MartinManev/npm_problem
cd npm_problem
npm install
npm update
npm run test:unit

Good find. There is a .cache folder in node_modules. I deleted it and the tests ran successfully again.

I know why webpack uses a cache, but not why it is stored in node_modules and not invalidated. It might be an issue with the webpack configuration of Vue CLI. I will investigate some more and post back when I find the problem/solution.

Thank you for your help.

1 Like

The problem is related to Vue CLI and the use of https://github.com/webpack-contrib/cache-loader

I posted the issue on Vue CLI’s GitHub:

I’ll mark this topic as solved.