CACHE_DIR environment variable ignored by find-cache-dir used by various loaders

[nickbreen]

Version

4.3.1

Reproduction link

https://github.com/nickbreen/vue-cache-dir

Environment info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-3450 CPU @ 3.10GHz
  Binaries:
    Node: 12.16.2 - /tmp/xfs-4036cb5a/node
    Yarn: 2.0.0-rc.32 - /tmp/xfs-4036cb5a/yarn
    npm: Not Found
  Browsers:
    Chrome: Not Found
    Firefox: 75.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

With the default configuration

Inspect the webpack configuration, looking for cache-loader's cacheDirectories

yarn workspace app vue-cli-service inspect | egrep cacheDirectory

Expect that the cacheDirectories are all under ./packages/app/node_modules/.cache/

---

With the CACHE_DIR environment variable set

Inspect the webpack configuration, looking for cache-loader's cacheDirectories

CACHE_DIR=/tmp yarn workspace app vue-cli-service inspect | egrep cacheDirectory 

Build

CACHE_DIR=/tmp yarn workspace app vue-cli-service build
test -d ./packages/app/node_modules/.cache && echo Did not expect this to exist

Expect that the caches are in /tmp

What is expected?

Expected the CACHE_DIR environment variables as defined in https://www.npmjs.com/package/find-cache-dir to be honoured.

What is actually happening?

Cannot influence location of cache.

---

Setting the environment variable in vue.config.js has no effect either... though it shouldn't as the app should not need to know about it.

My goal is to use a separate directory for cached objects outside of the source tree.

[nickbreen]

I can achieve the expected behaviour with this vue.config.js:

const {resolve} = require('path')

const cacheRoot = !!process.env.CACHE_DIR ? require('find-cache-dir')() : require('os').tmpdir();

const vueCacheDir = resolve(cacheRoot, 'vue-loader');
const babelCacheDir = resolve(cacheRoot, 'babel-loader');
const eslintCacheDir = resolve(cacheRoot, 'eslint-loader');
const terserCacheDir = resolve(cacheRoot, 'terser-webpack-plugin');

module.exports = {

    chainWebpack: config => {

        config.cache({type: 'memory'})

        /* config.module.rule('vue').use('cache-loader') */
         config.module.rule('vue').use('cache-loader')
             .tap(options => Object.assign(options, {cacheDirectory: vueCacheDir}))
        /* config.module.rule('vue').use('vue-loader') */
         config.module.rule('vue').use('vue-loader')
             .tap(options => Object.assign(options, {cacheDirectory: vueCacheDir}))
        /* config.module.rule('js').use('cache-loader') */
         config.module.rule('js').use('cache-loader')
             .tap(options => Object.assign(options, {cacheDirectory: babelCacheDir}))
        /* config.module.rule('eslint').use('eslint-loader') */
         config.module.rule('eslint').use('eslint-loader')
             .tap(options => Object.assign(options, {cache: eslintCacheDir}))
        /* config.optimization.minimizer('terser') */
         config.optimization
            .minimizer('terser')
            .init((Plugin, args) => {
                args[0].cache = terserCacheDir
                return new Plugin(...args)
            });
    }
}

Also, find-cache-dir apparently does not use it's {name} argument when called when CACHE_DIR is in the environment, which means that the caches could collide. So this kind of configuration will still be necessary.

It does show that the environment variable is available, it's just getting 'lost' by the time the built-in configurations call findCacheDir.