[Bug]: ExceedsStorageRange errors + sloooow experience with Storybook 8 + NextJS

[dgattey]

Describe the bug

I tried an upgrade to Storybook 8 and it works out of the box, but it's incredibly slow to build stories, and after building about 3-4 stories, clicking to the next one fails with a Rust-based error ExceedsStorageRange. We're also seeing TONS of logs like [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'SourceMapDevToolPlugin|__stories__-PaginationController-mdx.iframe.bundle.js': No serializer registered for ConcatSource in the terminal when running storybook dev, which seems related. Some stories still load but it's a mixed bag. Also lots of errors around serializing large strings. It appears to be trying to serialize the webpack config itself? Also errors with TerserWebpackPlugin.

It's sort of usable in dev, but building with storybook build results in a hard fail every time, with the same ExceedsStorageRange as the cause and tons of printouts around the caching problems. Running with --debug-webpack just shows the webpack config and there's nothing unexpected there I can tell.

We're using storybook 8.0.4, @storybook/nextjs 8.0.4, react 18.2.0, and next 14.1.3, with SWC as the compiler and Webpack5. lazyCompilation, fsCache, useSWC are all on, as is fastRefresh. The only addon we have is @storybook/addon-essentials (also 8.0.4).

Probably related to caching woes but swapping between stories is ~30sec - 1 min to load most stories, but some are ~1 sec without much rhyme or reason. Storybook 7.6.x was around a second per story. A build takes 7+ minutes (to fail), up from about a minute with Storybook 7.6.x.

Maybe there's something obvious here, but I've tried also removing all webpack custom config from our main.ts in our Storybook setup and there's no change.

To Reproduce

I can't share our private repo setup, but this does it:

Run storybook build with Storybook 8.0.4, @storybook/nextjs 8.0.4, react 18.2.0, and next 14.1.3, with SWC as the compiler and Webpack5. lazyCompilation, fsCache, useSWC are all on, as is fastRefresh. The only addon we have is @storybook/addon-essentials (also 8.0.4).

System

System:
    OS: macOS 14.4
    CPU: (11) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nodenv/versions/18.19.1/bin/node
    npm: 8.5.1 - ~/.nodenv/versions/18.19.1/bin/npm
    pnpm: 8.14.1 - ~/.nodenv/versions/18.19.1/bin/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.4

Additional context

No response

[valentinpalkovic]

Hi @dgattey

Thank you for raising this.

I have a couple of things in mind:

• useSWC doesn't exist anymore in 8. For more info please read the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automatic-swc-mode-detection
• react-docgen is the default for component analysis in Storybook 8. We already had a bunch of cases were people were running into performance issues by using react-docgen. Could you try to switch back to react-docgen-typescript? You can find more info in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

[dgattey]

@valentinpalkovic thanks for the quick response.

• I thought from reading about the @storybook/nextjs framework that it still supported the useSWC flag itself? It was tough to find out the latest recommended setup with it - can you point me to an example/documentation about that framework for use with Storybook 8 specifically?
• Hmm, thought it was supposed to help to swap the docgen! I'll try swapping back the TS version later this week and see what happens. Thanks for the tip.

[valentinpalkovic]

It might be that the docs are not correct anymore. Can you point me to the docs where it still has the useSWC flag documented?

I've already linked you to the proper place in the migration doc. But essentially that's all you have to know:

Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules:

If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code.
Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental experimental.forceSwcTransforms flag to true in your next.config.js.

[sneko]

@dgattey did you fix the issue about the flood of logs: [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'SourceMapDevToolPlugin|...?

I'm in the same case after upgrading from v7. I can investigate by deconstructing each piece but there are so many things... 😄 (also using Next.js).

EDIT: seems we are not alone: https://github.com/sentience/storybook-nextjs-webpack-cache-issue-demo

[sneko]

Since editing cannot link the PR, here it is: #29654