Chromatic TurboSnap builds don't work with Rsbuild

[phildenhoff]

I've created a codesandbox to demonstrate this issue, using a throwaway Chromatic project with TurboSnap enabled.

When Storybook is built using Rsbuild/Rspack (via the storybook-rsbuild package), Chromatic fails to detect any CSF globs in the preview-stats.json file, and so TurboSnap fails. Full builds work fine.

E.g. running npx chromatic --only-changed would give an error like this

  Error: ✖ Failed to publish your built Storybook
  Could not retrieve dependent story files.
  Did not find any CSF globs in preview-stats.json

I'm not super familiar with Webpack or the stats files in general, but this seems to stem from the "reason" files having module names from this list when doing a Webpack or Vite build. Rsbuild, instead, has very different names.

For example, a Vite module name would look like this:

{
  "moduleName": "/virtual:/@storybook/builder-vite/vite-app.js"
}

and an Rsbuild one like this:

{
  "moduleName": "/Users/phil/work/ts-wholesale/ui/src|lazy|/^\\.\\/.*$/|include: /(?!.*node_modules)(?:\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$/|chunkName: [request]|groupOptions: {}|strict namespace object"
}

Because the second module name (in modules[0].reasons[0].moduleName) is not one of the "approved" items, the CSF story module is skipped.

I think that's it. Hopefully you can advise how we can use Rsbuild & Chromatic together!

[ghengeveld]

:rocket: Issue was released in v11.10.0 :rocket:

[phildenhoff]

Thank you @ghengeveld and @joshwooding!