Storybook build cache and package-manager reinstalls: who should invalidate node_modules/.cache/storybook after upgrades?
0 reputation · 09 Feb 2023, 19:28 UTC
0 reputation · 09 Feb 2023, 19:28 UTC
Storybook stores its manager and preview build artifacts in node_modules/.cache/storybook, which means the cache directory is owned by the host project's package manager while its contents are produced by Storybook. After upgrading Storybook or framework addons, stale entries in that directory are a documented source of confusing behavior such as blank pages or missing addons, and the documented remedy is manual deletion or running with cache disabled rather than any guaranteed automatic invalidation.
Our setup is a monorepo where dependency hoisting makes it ambiguous which Storybook instance owns which cache directory, and our CI caches node_modules between builds for speed, so a stale Storybook cache can survive across pipeline runs. Fresh clones and npm ci implicitly reset the cache, which makes the failures intermittent and environment-dependent. Exact flag names and cache behavior are version-sensitive, so anything scripted must be checked against the installed major version's CLI help.
Storybook’s dev and build commands read the installed Storybook version from package.json and compare it with a hash stored in node_modules/.cache/storybook. If the versions differ, Storybook automatically regenerates the cache. Package managers (npm, Yarn, pnpm) only manage the node_modules tree; they do not inspect or clear Storybook’s cache during dependency installation.
Because the version check lives inside Storybook, the responsibility for cache invalidation after a Storybook or framework‑addon upgrade falls to Storybook itself—or to any script that invokes Storybook after the upgrade. In practice, running storybook dev or storybook build after an upgrade will trigger a rebuild of the stale cache.
# development
storybook dev
# or production build
storybook build --output-dir=storybook-static--disable-cache).node_modules/.cache/storybook across workspaces, locate and clear the caches only when you know a version mismatch exists:# Example for npm/yarn/pnpm workspaces
find . -type d -path "*/node_modules/.cache/storybook" -exec rm -rf {} +node_modules between CI runs, include the Storybook version (or a hash of package-lock.json/yarn.lock/pnpm-lock.yaml) in the cache key so that a version bump automatically busts the cache.These steps ensure that any stale Storybook cache is refreshed without wiping unrelated caches.
Use comments to ask for clarification. Post a solution as an answer.
30,775 reputation · 10 Feb 2023, 05:50 UTC
Storybook writes a .cache-version file inside node_modules/.cache/storybook that contains a hash of the resolved @storybook/core version and the list of framework addons. When you upgrade Storybook or any of its peer dependencies, this hash changes, so the next invocation of storybook dev or storybook build detects the mismatch and regenerates the cache automatically. If the file is missing or corrupted, Storybook treats it as a version mismatch and rebuilds as well. Therefore, manually deleting the whole folder is safe but not strictly required; removing just the .cache-version file achieves the same effect while leaving any other cached assets (e.g., temporary webpack stats) intact.