Unable to get storybook to build with storybook-rsbuild.

[edhgoose]

Hi,

Since adding storybook-rsbuild, I've found that I'm unable to get a build to complete.

The process always gets stuck on:

● Client ━━━━━━━━━━━━━━━━━━━━━━━━━ (70%) sealing chunk optimization

If I run it in dev mode, the iframe.html never loads - and sits in pending.

The UI shows:

start   Compiling...

The full output, for build:

$ yarn run build:storybook
@storybook/cli v7.6.19

info => Cleaning outputDir: /.storybook/dist
info => Loading presets
info => Building manager..
info => Manager built (582 ms)
info => Building preview..
info Addon-docs: using MDX3
info => Copying static files: /Users/ed.hartwellgoose/my-company/node_modules/@storybook/manager/static at /Users/ed.hartwellgoose/my-company/frontend/.storybook/dist/sb-common-assets
warn    Rsbuild plugin "rsbuild:less" registered multiple times.
● Client ━━━━━━━━━━━━━━━━━━━━━━━━━ (70%) sealing chunk optimization

For dev:

$ yarn run storybook
Initializing the Mock Service Worker at "/Users/ed.hartwellgoose/my-company/frontend/.storybook/dist"...

Service Worker successfully created!
/Users/ed.hartwellgoose/my-company/frontend/.storybook/dist/mockServiceWorker.js

Continue by creating a mocking definition module in your application:

https://mswjs.io/docs/getting-started/mocks

@storybook/cli v7.6.19

info => Serving static files from ././.storybook/dist at /
info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
warn    Rsbuild plugin "rsbuild:less" registered multiple times.
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                         │
│   Storybook 7.6.19 for /Users/ed.hartwellgoose/my-company/node_modules/storybook-react-rsbuild started   │
│   1.18 s for manager and 1.61 s for preview                                                             │
│                                                                                                         │
│    Local:            https://localhost:8082/                                                            │
│    On your network:  https://my-company.dev:8082/                                                        │
│                                                                                                         │
│   A new version (8.1.6) is available!                                                                   │
│                                                                                                         │
│   Upgrade now: npx storybook@latest upgrade                                                             │
│                                                                                                         │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md                  │
│                                                                                                         │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
start   Compiling...

The terminal looks like it's running esbuild when it gets stuck.

I've tried running with various debug options, e.g. --debug or --loglevel silly, but it provides nothing new which puzzles me.

Any clues or points as to what might be the issue? Or what information would help with debugging?

Thanks,
Ed

[edhgoose]

A few more debug details to try and help:

I've tried upgrading to Storybook 8 - no luck with that.

I've tried running the below, with the following minimal config file:

import { StorybookConfig } from "storybook-react-rsbuild";

import { dirname, join } from "path";

const getAbsolutePath = (value: string): any => {
    return dirname(require.resolve(join(value, "package.json")));
};

const config: StorybookConfig = {
    framework: {
        name: getAbsolutePath("storybook-react-rsbuild"),
        options: {
            builder: {
                rsbuildConfigPath: "./config/rsbuild/rsbuild.config.ts",
            },
        },
    },
    stories: [
        "/Users/ed.hartwellgoose/my-company/a/specific/story.stories.tsx",
    ],
    addons: [
      
    ],
};

export default config;

/opt/homebrew/Cellar/node@18/18.19.0/bin/node /Users/ed.hartwellgoose/my-company/node_modules/storybook/index.js dev --debug --loglevel silly

And I get:

@storybook/cli v8.1.6

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
warn    Rsbuild plugin "rsbuild:less" registered multiple times.
╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                        │
│   Storybook 8.1.6 for /Users/ed.hartwellgoose/my-company/node_modules/storybook-react-rsbuild started   │
│   655 ms for manager and 1.69 s for preview                                                            │
│                                                                                                        │
│    Local:            http://localhost:50830/                                                           │
│    On your network:  http://192.168.0.42:50830/                                                        │
│                                                                                                        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────╯
start   Compiling...
info Using tsconfig paths for react-docgen

I've tried to also use: DEBUG=rsbuild, and one thing which is interesting is that we get: debug 23:18:49 Use Rspack v0.6.5:

@storybook/cli v8.1.6

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
debug   23:18:47 add default plugins
debug   23:18:48 add default plugins done
warn    Rsbuild plugin "rsbuild:less" registered multiple times.
debug   23:18:48 init plugins
debug   23:18:48 init plugins done
debug   23:18:48 modify Rsbuild config
debug   23:18:48 modify Rsbuild config done
debug   23:18:48 create dev server
debug   23:18:48 modify bundler chain
debug   23:18:49 modify bundler chain done
debug   23:18:49 modify Rspack config
debug   23:18:49 modify Rspack config done
debug   23:18:49 create compiler
debug   23:18:49 create compiler done
debug   23:18:49 create dev server done
╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                        │
│   Storybook 8.1.6 for /Users/ed.hartwellgoose/my-company/node_modules/storybook-react-rsbuild started   │
│   180 ms for manager and 2.07 s for preview                                                            │
│                                                                                                        │
│    Local:            http://localhost:64347/                                                           │
│    On your network:  http://192.168.0.42:64347/                                                        │
│                                                                                                        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────╯
debug   23:18:49 Use Rspack v0.6.5
start   Compiling...
error   Compile error:

I've tried cutting the config down as much as possible in rsbuild as well, but not having any luck :(

[fi3ework]

You could try running DEBUG=rsbuild pnpm build:storybook then in the debug log you'll find something like

  - Rsbuild Config: /Users/bytedance/Projects/storybook-rsbuild/sandboxes/react-rsbuild/storybook-static/rsbuild.config.mjs
  - Rspack Config (web): /Users/bytedance/Projects/storybook-rsbuild/sandboxes/react-rsbuild/storybook-static/rspack.config.web.mjs

You can attach the content here.

[matteom-synth]

👋 Same issue here. It gets stuck like this when running Storybook (v8) with DEBUG=rsbuild (same config works fine with Webpack + SWC):

» DEBUG=rsbuild pnpm storybook

> @[email protected] storybook /Users/matteo.mazzarolo/workspace/example/apps/studio
> storybook dev --port 6006

@storybook/cli v8.1.6

WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version.
WARN It's recommended you read this document:
WARN https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
WARN
WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.
info => Serving static files from ././public at /
info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
debug   11:11:16 add default plugins
debug   11:11:16 add default plugins done
debug   11:11:16 init plugins
debug   11:11:16 init plugins done
debug   11:11:16 modify Rsbuild config
debug   11:11:16 modify Rsbuild config done
debug   11:11:16 create dev server
debug   11:11:16 modify bundler chain
debug   11:11:16 modify bundler chain done
debug   11:11:16 modify Rspack config
debug   11:11:16 modify Rspack config done
debug   11:11:16 create compiler
debug   11:11:16 create compiler done
debug   11:11:16 create dev server done
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                          │
│   Storybook 8.1.6 for storybook-react-rsbuild started                                    │
│   537 ms for manager and 724 ms for preview                                              │
│                                                                                          │
│    Local:            http://localhost:6006/                                              │
│    On your network:  http://192.168.1.165:6006/                                          │
│                                                                                          │
│   A new version (8.1.9) is available!                                                    │
│                                                                                          │
│   Upgrade now: npx storybook@latest upgrade                                              │
│                                                                                          │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
debug   11:11:16 Use Rspack v0.6.5
start   Compiling...
info Using tsconfig paths for react-docgen