Open timmevandermeer opened 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:
/code/builders/builder-vite/src/optimizeDeps.ts
.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:
/code/builders/builder-vite/src/vite-config.ts
.optimizeDeps
configuration is merged correctly.
const sbConfig: InlineConfig = {
...,
optimizeDeps: {
exclude: ['your-problematic-dependency'],
},
};
Rebuild and Restart:
This should prevent Vite from attempting to optimize the problematic dependencies in the Storybook cache folder.
/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
@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.
@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.
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()}`],
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.
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.
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..
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"
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...
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.
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)
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
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
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
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.
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.
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 🪄
@oleksandr-danylchenko yes that has been my mitigation too, see here: https://github.com/storybookjs/storybook/issues/28542#issuecomment-2225296609
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.
Describe the bug
Often after switching branches I encounter the following error type when starting Storybook (causing it to fail to load)
Deleting the
.cache
folder or even the entirenode_modules
folder does not resolve this. However, there are a couple things that resolve it (until it occurs again):main.ts
config (it seems any change will do)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
Additional context
Storybook version: 8.1.11 Builder:
@storybook/react-vite
Project is monorepo with Yarn 4 workspaces