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

timmevandermeer commented 1 month ago

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

greptile-apps[bot] commented 1 month ago

To address the issue of Vite builder failing due to optimizing files in the Storybook cache folder, follow these steps:

Modify optimizeDeps Configuration:

Open /code/builders/builder-vite/src/optimizeDeps.ts.

Add the problematic dependencies to the optimizeDeps.exclude array.

const optimizeDeps: UserConfig['optimizeDeps'] = {
...config.optimizeDeps,
entries: stories,
include: [...include, ...(config.optimizeDeps?.include || [])],
exclude: [...(config.optimizeDeps?.exclude || []), 'your-problematic-dependency'],
};

Update Vite Configuration:
- Open /code/builders/builder-vite/src/vite-config.ts.
- Ensure the optimizeDeps configuration is merged correctly.
```
const sbConfig: InlineConfig = {
...,
optimizeDeps: {
exclude: ['your-problematic-dependency'],
},
};
```
Rebuild and Restart:
- Rebuild your project and restart Storybook to apply the changes.

This should prevent Vite from attempting to optimize the problematic dependencies in the Storybook cache folder.

References

/code/builders/builder-vite/src/optimizeDeps.ts /code/builders/builder-vite/src/vite-config.ts /code/builders/builder-vite/src/index.ts /code/builders/builder-vite

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

vanessayuenn commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

cemysf commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

@oleksandr-danylchenko yes that has been my mitigation too, see here: https://github.com/storybookjs/storybook/issues/28542#issuecomment-2225296609

donaldpipowitch commented 2 weeks ago

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.

storybookjs / storybook