[Bug]: vite builder fails trying to optimize files in the storybook cache folder

[timmevandermeer]

Describe the bug

Often after switching branches I encounter the following error type when starting Storybook (causing it to fail to load)

The file does not exist at "<PROJECT_PATH>/node_modules/.cache/storybook/a6871e0c26d33fcbda0875414a230db7277d874a67a0ffb34bdf44755e21997a/sb-vite/deps/chunk-WMAVEDOJ.js?v=78430ec4" which is in the optimize deps directory. 
The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.

Deleting the .cache folder or even the entire node_modules folder does not resolve this.
However, there are a couple things that resolve it (until it occurs again):

• Changing / upgrading the Storybook version (any version bump will do)
• Changing the Storybook main.ts config (it seems any change will do)
• Making a fresh clone of the repo

However, reverting the changes above causes the problem to re-emerge. The one thing I could think of here is that there is some caching (by Vite or Storybook) happening globally or at least outside the project folder, but I could not find any documentation on this

Reproduction link

Sorry I don't have any, it might be project specific

Reproduction steps

I don't have reproduction steps because it happens fairly randomly. It happens typically when switching between feature branches and then back.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.1 - ~/.local/state/fnm_multishells/98494_1720679783884/bin/node
    Yarn: 4.1.1 - /opt/homebrew/bin/yarn <----- active
    npm: 9.8.1 - ~/.local/state/fnm_multishells/98494_1720679783884/bin/npm
  Browsers:
    Safari: 17.4.1

Additional context

Storybook version: 8.1.11
Builder: @storybook/react-vite
Project is monorepo with Yarn 4 workspaces

[vanessayuenn]

@timmevandermeer unfortunately it will be difficult for us to investigate this without a reproduction. Are you able to narrow down which dependency is the problematic one? It will also be helpful to see your storybook dependencies.

[timmevandermeer]

@vanessayuenn I understand but the issue occurs in a seemingly unpredictable manner and seems quite specific to this project. The project has quite a few dependencies that are internal packages, so that doesn't help. The Vite error is not very useful as it is not mentioning what dependency it relates to, only that some cached chunk is missing.

• I tried to find out more about what dependency is the issue, but specifying a lower log level on the Vite config, the Storybook config or the Storybook CLI does not seem to do anything (that's a separate issue).
• I've tried optimizeDeps.exclude with various dependencies, but the issue disappears temporarily whenever the config is changed. This makes it unclear if it was the right package. Actually I now put the following which so far seems to fix the entire issue by always "changing" the config.

exclude: [..., `fake-dep-${Math.random()}`],

• I've also tried an empty optimizeDeps.include and optimizeDeps.force, but all without success.

I'm just wondering what could explain the mechanism that any change to the optimizeDeps setting temporarily fixes the problem, and so does any storybook version bump.

[MehYam]

In case this data point helps, I just came across this error for the first time today in just a vite-built React app (nothing to do with Storybook), after invoking vite build:

The file does not exist at "[...project directory]/node_modules/.vite/deps

After deleting the contents of that directory and re-running vite build, it's happy again. I searched, very little info out there on this error condition.

[timmevandermeer]

After deleting the contents of that directory and re-running vite build

In the case of Storybook with the Vite builder the deps are cache in the sb-vite directory but deleting it, or even running rm -rf ./**/node_modules doesn't resolve it for me. Only thing I can think of is that there is some global caching happening somewhere somehow..

[oleksandr-danylchenko]

The same issue started happening to me today!

The file does not exist at "/.../node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-V6X3MVQQ.js?v=17b33123" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`

The issues seem to happen only in the dev branch, but it doesn't contain any changes to the SB or Vite configs 🤯

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 4.3.1 - ~/.nvm/versions/node/v20.9.0/bin/yarn <----- active
    npm: 10.8.1 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: 8.1.4 => 8.1.4 
    @storybook/addon-interactions: 8.1.4 => 8.1.4 
    @storybook/addon-links: 8.1.4 => 8.1.4 
    @storybook/addon-onboarding: 8.1.4 => 8.1.4 
    @storybook/addon-themes: 8.1.4 => 8.1.4 
    @storybook/blocks: 8.1.4 => 8.1.4 
    @storybook/manager-api: 8.1.4 => 8.1.4 
    @storybook/react: 8.1.4 => 8.1.4 
    @storybook/react-vite: 8.1.4 => 8.1.4 
    @storybook/test: 8.1.4 => 8.1.4 
    @storybook/test-runner: ^0.17.0 => 0.17.0 
    @storybook/theming: 8.1.4 => 8.1.4 
    chromatic: ^11.3.5 => 11.3.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: 8.1.4 => 8.1.4

"vite": "^5.2.11"
"@vitejs/plugin-react": "^4.2.1"

---

UPD:

Bumping to:

"vite": "^5.3.4"
"@vitejs/plugin-react": "^4.3.1"

helped to resurrect the Storybook, but I'm not sure about the longevity of such a solution...

[superdrenner]

For me, deleting node_modules/.cache fixes it. I only have the issue when running storybook. I can build and run the application without issue. If I introduce a new export from an internal workspace package the problem comes back.

[someonewithpc]

I'm not using storybook, but I'm getting the same message. I posted at vitejs/vite#17738 (not a bug report, because they require a minimal reproduction)

[cemysf]

I just had the same issue but with another project and without a dedicated frontend client like storybook here. For me disabling the cache on my browser and then reloading solved it.
Not sure how to apply this to storybook though, I am not familiar with this project

[oleksandr-danylchenko]

Another thing that helped - explicit storybook cache exclusion from the Vite's optimization:

optimizeDeps: {
	exclude: ['node_modules/.cache/storybook']
}

UPD: After updating one of the dependencies in package.json - it didn't help

[VaiorettoEvagaden]

My error is:

The file does not exist at "<PROJECT_PATH>/node_modules/.cache/sb-vite/deps/chunk-F46WM3MW.js?v=0eb8ce27" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.

And I add this to .storybook/main.ts:

  async viteFinal(config) {
      optimizeDeps: {
        exclude: ["node_modules/.cache/sb-vite"],
      },
    });

This works for me

[AericN]

I don't know if it'll help you or not but I was able to resolve the issue by deleting my local node_modules folder and then running 'npm install' fresh. In my case I believe the issue was caused by switching between branches that had different node_module configurations. I had run 'npm audit fix' on one branch then switched to another branch and then got this error. I didn't need to add any exclusions or anything else.

[timmevandermeer]

As described in the issue, in this case deleting the .cache folder or entire node_modules does not resolve it. That's the strange thing, because normally something like that would resolve it, and to me it implied some global caching happening somewhere.

[oleksandr-danylchenko]

Another thing that helps me with occasional cache mismatches is changing the:

optimizeDeps: {
	exclude: ['node_modules/.cache/storybook']
}

to something absurd like:

optimizeDeps: {
	exclude: ['node_modules/.cache/storybook/fasfasfqwfqw']
}

Then when I start the Storybook, it somehow revalidates the Vite's cache and runs all the stories properly. Then I can go back to the adequate path, restart, and enjoy my day till the next caching issue 🪄

[timmevandermeer]

@oleksandr-danylchenko yes that has been my mitigation too, see here: #28542 (comment)

[donaldpipowitch]

Thanks @timmevandermeer for your workaround. We already added 'node_modules/.cache/storybook' to config.optimizeDeps.exclude, but right now I faced a situation where this didn't helped anymore. Clearing any kind of caches, re-installing deps, etc. also didn't work. Only config.optimizeDeps.exclude.push(`fake-dep-${Math.random()}`) made it possible for me to start Storybook again.

[willashe]

Just ran into this issue today right after switching branches, installing dependencies, then switching back and re-installing.
Deleting yarn.lock and re-installing deps seems to fix the issue. Reverting yarn.lock back and reinstalling reintroduces the issue (even though the file wasn't changed on this branch since before when it was working).

[alex2]

I've been having this issue intermittently in my local repo but never on CI. Clearing node_modules and/or the .cache directory specifically does nothing to resolve things.

I noticed that switching browsers or going incognito results in no issues so I assume the issue is something browser cache related. I tried "clear site data" in chrome but it didn't work, but unchecking "disable cache" on the network tab, then reloading, then re-checking "disable cache" solved the issue in my original browser profile.

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[grantwforsythe]

Can this issue be reopened as a clear solution was not reached?