Next.js: Allow BABEL_DISABLE_CACHE to override `cacheDirectory` in `webpack.js`

[vjpr]

Currently, you can clear the cache in node_modules/.cache. But if you are developing, or changing presets, you might want to force cache clear using standard babel env var.

Context

Trying to support pnpm https://github.com/zeit/next.js/issues/2855

Your Environment

| Tech | Version |
|---------|---------|
| next | 3.0.6 |
| node | 8.1.2 |
| OS | macOS |
| browser | |
| etc | |

[vjpr]

Workaround

next.config.js

module.exports = {
  webpack: (config, {dev}) => {
    disableCacheDirectory(config)
    return config
  }
}
function disableCacheDirectory(config) {
  config.module.rules
    .filter(({loader}) => loader === 'babel-loader')
    .map(l => (l.options.cacheDirectory = false))
}

[morgs32]

@vjpr you are THE man.

[zenflow]

@vjpr's workaround worked for me, but I had to return config at the end of the webpack function

[timneutkens]

@zenflow updated the example

@vjpr can you point to any documentation about BABEL_DISABLE_CACHE otherwise the next.config.js solutions is fine and we should close this issue 👍 You could even implement BABEL_DISABLE_CACHE yourself there 👍

[vjpr]

@timneutkens https://babeljs.io/docs/usage/babel-register/#environment-variables

Seems that this is only for babel-register and babel-node though. Maybe it is better to have something like NEXT_BABEL_DISABLE_CACHE...

[HeroProtagonist]

I tried the workaround with "next": "^5.0.0" and it did not work. I modified it slightly and it disabled the cache. Maybe a change from version v3 -> v5 changed the object structure?

function disableCacheDirectory(config) {
  config.module.rules
    .filter(({ use }) => use && use.loader === 'babel-loader')
    .map(l => (l.use.options.cacheDirectory = false))
}

[timneutkens]

Feel free to create a community supported plugin to do ^ 👍We're not planning to turn it into an environment variable.

[ryandrewjohnson]

Can anyone confirm that this workaround still works in v7.0.2? It looks like the webpack config no longer uses babel-loader directly when inspecting the output for config. Now all I see is next-babel-loader. I've tried adding the cacheDiretory=false for next-babel-loader hoping it takes the same options as babel-loader, but it doesn't seem to work.

Update:
Turns out this works when targeting next-babel-loader as well. I just forgot to delete the existing node_modules/.cache/babel-loader folder after changing this setting. Below is the updated snippet I'm using:

config.module.rules = config.module.rules.map(rule => {
    if (rule.use.loader && rule.use.loader === 'next-babel-loader') {
      rule.use.options.cacheDirectory = false;
    }
    return rule;
  });

  return config;