Storybook: Storybook does not respect cacheDirectory for cache location

[pkuczynski]

Describe the bug
Storybook creates .cache folder in the root of my project despite my webpack config specifies a different location for cacheDirectory

To Reproduce
Steps to reproduce the behavior:

1. Run storybook

Expected behavior
Cache folder is created in the location specified by cacheDirectory

Code snippets

Webpack config:

...
  module: {
    rules: [
      {
        test: /\.js?$/u,
        exclude: /node_modules/u,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: path.join(process.cwd(), 'build/cache/babel')
          }
        }
      }
    ]
  }
...

System:

• OS: macOS
• Device: N/A
• Browser: N/A
• Framework: react
• Version: 4.0.0

[shilman]

AFAIK this .cache directory is a place to store files related to a version check added in v4, and is not related to webpack.

[pkuczynski]

I see. Is there any way to specify different location for this folder?

[igor-dv]

Probably we can provide an env variable for this. 🤔

[pkuczynski]

How about adding this to config.js?

[igor-dv]

config.js is loaded to client, and cache dir should be provided to babel 🤷‍♂️ But it will be possible with #4169

[shilman]

@igor-dv this is not related to babel -- see my comment above. this is about version checks, so I think an environment variable or config option would be fine.

@pkuczynski can you explain why you want to put this directory in a different location? (just for my curiosity)

[rhys-vdw]

can you explain why you want to put this directory in a different location?

For me I don't want to add a new line to .gitignore for every module that needs a cache folder. So if there's an easy way to define this globally, or in config, I'd prefer to supply a path that is already ignored.

[pkuczynski]

Same thing in my case. I already ignore build folder where my build output is stored together with babel cache and some other cache files.

[rachel-md]

I have Babel caching enabled but rely on the default path of node_modules/.cache/babel-loader. I noticed there's also a cache file for Storybook in node_modules/.cache/react-storybook. Why is an additional cache folder needed at the root level? Could the two folders be combined? I too prefer to have my all my cache folders in the same location which is why node_modules works perfect for me.

[rhys-vdw]

Yeah, node_modules/.cache seems standard and is conveniently beneath the deps folder which is already ignored.

[pkuczynski]

Thanks @alex-fournier !

[shilman]

This just went out in https://github.com/storybooks/storybook/releases/tag/v4.0.9

Great work @alex-fournier!