Webpack cache is not invalidated after npm update/install

[MartinManev]

Version

3.11.0

Reproduction link

https://npm.community/t/npm-install-update-does-not-properly-install-dependencies/9880

Environment info

  System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 10.16.3 - /usr/bin/node
    Yarn: Not Found
    npm: 6.11.3 - /usr/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 60.8.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.11.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.11.0 
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0 
    @vue/cli-plugin-unit-mocha: ^3.11.0 => 3.11.0 
    @vue/cli-service: ^3.11.0 => 3.11.0 
    @vue/cli-shared-utils:  3.9.0 (3.11.0)
    @vue/component-compiler-utils:  3.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    vue: ^2.6.10 => 2.6.10 
    vue-cli-plugin-quasar: ^1.0.0 => 1.0.0 
    vue-cli-plugin-s3-deploy: ^3.0.0 => 3.0.0 
    vue-hot-reload-api:  2.3.3 
    vue-i18n: ^8.14.0 => 8.14.0 
    vue-loader:  15.7.1 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.11.0

Steps to reproduce

The issue is described in the link above. It includes a link to a repo and exact reproduction steps.

What is expected?

After npm update or npm install the Webpack cache is invalidated and Webpack is forced to recompile again. This is important.

What is actually happening?

The Webpack cache is valid even though the packages have changed which leads to errors and/or use of outdated code.

[MartinManev]

Some additional information:

The folder node_modules/.cache is created when I run npm run build or npm run test:unit for the first time after cloning the project and is then reused by further npm scripts. This is where the cached information is stored. After updating the packages in node_modules the .cache directory persists and is unchanged.

I found the following in the output of vue inspect:

  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      /* config.module.rule('vue') */
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/home/manev/proj/npm_problem/node_modules/.cache/vue-loader',
              cacheIdentifier: '560e37e0'
            }
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
              cacheDirectory: '/home/manev/proj/npm_problem/node_modules/.cache/vue-loader',
              cacheIdentifier: '560e37e0'
            }
          }
        ]
      },

      /* config.module.rule('js') */
      {
        test: /\.m?jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/home/manev/proj/npm_problem/node_modules/.cache/babel-loader',
              cacheIdentifier: '43d29475'
            }
          },
          {
            loader: 'babel-loader'
          }
        ]
      }

I see that https://github.com/webpack-contrib/cache-loader is used, but I am not familiar with it and don't how it is used in Vue CLI.

[LinusBorg]

1. This only concerns packages that are transpiled with transpileDependencies option as aotherwise, anything from node_modules is not run trough babel/cache-loader
2. This problem is already tracked in babel-loader cache won't be updated after updating transpileDep with npm #4438 and I have a PR in the works in fix(babel): [WIP] bust cache when a transpiled Dependency's version changed (close #4438, #4543) #4450, so I'll close this as a duplicate of babel-loader cache won't be updated after updating transpileDep with npm #4438