rspack-contrib / storybook-rsbuild

Storybook builder and frameworks powered by Rsbuild.
MIT License
72 stars 4 forks source link

Unable to get storybook to build with storybook-rsbuild. #21

Open edhgoose opened 3 months ago

edhgoose commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

👋 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

> @example@1.4.0 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