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!

[tranvansang]

babel/babel#5198 (comment)

https://babeljs.io/docs/en/babel-register#babel_cache_path=

It would be good if sb supports customizing the cache path

[kubijo]

babel/babel#5198 (comment)

https://babeljs.io/docs/en/babel-register#babel_cache_path=

It would be good if sb supports customizing the cache path

As a follow-up to this, I am unifying the cache directory path for our tools and storybook is the last hard-headed one that seemingly cannot be persuaded to use it (as seen in resolve-path-in-sb-cache.ts#L6)

Could you please consider introducing some solution for this to be configurable?
You are seemingly using find-cache-dir for some cache path, which should be manipulable by CACHE_DIR env variable, but not in the linked location, which results in node_modules/.cache/storybook/{dev-server,public} being created in my workspace root (I use Yarn's PNP mechanism, so otherwise I do not have node_modules at all)…

[ndelangen]

@kubijo would you be open to creating a new issue for that and possibly a PR, moving storybook to use find-cache-dir everywhere?

storybook/code/lib/builder-vite/src/vite-config.ts

Line 54 in 11bec10

cacheDir: 'node_modules/.cache/.vite-storybook',

storybook/code/lib/builder-vite/src/plugins/external-globals-plugin.ts

Line 50 in 95f4adc

const cachePath = join(process.cwd(), 'node_modules', '.cache', 'vite-plugin-externals');

storybook/code/lib/core-common/src/utils/resolve-path-in-sb-cache.ts

Lines 18 to 22 in 441338a

	if (!projectDir) {
	cacheDirectory = path.resolve(cwd, '.cache/storybook');
	} else {
	cacheDirectory = path.resolve(projectDir, 'node_modules/.cache/storybook');
	}

There might be more references..