You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Storybook webpack builder supports an fsCache option to enable disk-based caching, which greatly improves incremental build performance in webpack-based Storybook projects.
When the fsCache option is enabled in a Storybook project that uses the Next.js framework, however, the disk-based cache does not work, and the Storybook build outputs a large number of webpack.cache.packFileCacheStrategy warnings. As a result, Next.js projects cannot benefit from the significant speed boost afforded by the webpack disk cache.
Next.js overrides certain internal webpack packages (particularly `webpack-sources`), which are involved with filesystem caching, with its own versions from next/dist/compiled.
For filesystem caching to work, Next.js must be allowed to perform these overrides before webpack is first initialized by @storybook/builder-webpack5. If it is not, the objects to be serialized to disk in the caching process will be instantiated using the original (non-Next.js) modules, but the serializers will be created using the Next.js modules. This mismatch between the objects to be cached and the serializers that write the filesystem cache prevents the cache from being written; instead, webpack outputs a warning message to the console for every object that it tries and fails to find a matching serializer for.
This fix works by invoking Next.js to configure webpack in the `core` hook of @storybook/nextjs/preset, immediately before loading @storybook/builder-webpack5. We don't actually use this configuration that Next.js creates; the actual configuration that will be used in the build is still generated in `webpackFinal` as before.
`fsCache` has a large impact on Storybook build performance. Even in a minimal project with a single story, enabling it reduces build time by 66%! This is therefore a very valuable option to be able to enable.
Fixesstorybookjs#29621
Describe the bug
The Storybook Next.js framework uses webpack internally to build Storybooks for Next.js projects.
The Storybook webpack builder supports an
fsCache
option to enable disk-based caching, which greatly improves incremental build performance in webpack-based Storybook projects.When the
fsCache
option is enabled in a Storybook project that uses the Next.js framework, however, the disk-based cache does not work, and the Storybook build outputs a large number ofwebpack.cache.packFileCacheStrategy
warnings. As a result, Next.js projects cannot benefit from the significant speed boost afforded by the webpack disk cache.Storybook config
Reproduction link
https://github.com/sentience/storybook-nextjs-webpack-cache-issue-demo
Reproduction steps
git clone https://github.com/sentience/storybook-nextjs-webpack-cache-issue-demo.git
cd storybook-nextjs-webpack-cache-issue-demo
pnpm i
pnpm storybook dev
System
Additional context
This problem seems to have existed since the introduction of @storybook/nextjs in Storybook 8.0.
The text was updated successfully, but these errors were encountered: