Very long compilation time and error "Conflict: Multiple assets emit different content to the same filename iframe.html" when source.entry is set in rsbuild config

Storybook × Rsbuild

The repository contains the Storybook Rsbuild builder and framework integrations for UI frameworks.

package	description
storybook-builder-rsbuild	Rsbuild powered builder for Storybook
storybook-react-rsbuild	React integration for Storybook with Rsbuild builder
storybook-vue3-rsbuild	Vue 3 integration for Storybook with Rsbuild builder

Usage

Important

Peer dependencies requirements:

@rsbuild/core >= 1.0.0-alpha.9: Rsbuild is about to release version 1.0.0, and the current alpha version is already very reliable. (check out Rsbuild's 1.0.0 breaking changes)
storybook >= 8.2.1: Storybook made some internal refactor in major version, 8.2.1 is tested out. (check out Storybook's release note for migrating from v7)

In Storybook v8, you don't need to manually install storybook-builder-rsbuild, it has been depended by the framework, such as storybook-react-rsbuild and storybook-vue3-rsbuild.

Use with React (in a existing Rsbuild project)

Install React framework integration
```
pnpm i storybook-react-rsbuild -D
```

Change .storybook/main.js

import { StorybookConfig } from 'storybook-react-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-react-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config;
  },
};

export default config;

You're all set now. You could also check out the example in sandboxes/react-18 and use all other features listed in Storybook site.

Use with Vue 3 (in a existing Rsbuild project)

Install Vue3 framework integration
```
pnpm i storybook-vue3-rsbuild -D
```

Change .storybook/main.js

import { StorybookConfig } from 'storybook-vue3-rsbuild'

const config: StorybookConfig = {
  framework: 'storybook-vue3-rsbuild',
  rsbuildFinal: (config) => {
    // Customize the final Rsbuild config here
    return config;
  },
};

export default config;

You're all set now. You could also check out the example in sandboxes/vue3-rsbuild and use all other features listed in Storybook site.

Builder options

`rsbuildConfigPath`

Type: string
Default: undefined

The builder will automatically load Rsbuild config file (e.g. rsbuild.config.js) in the project, though it may change some of the options in order to work correctly. It looks for the Rsbuild config in the CWD. If your config is located elsewhere, specify the path using the rsbuildConfigPath builder option:

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        rsbuildConfigPath: '.storybook/customRsbuildConfig.js',
      },
    },
  },
}

export default config

`lazyCompilation`

Type: boolean
Default: false

Enables Rspack's experimental lazy compilation.

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        lazyCompilation: true,
      },
    },
  },
}

export default config

`environment`

Type: string
Default: undefined

Rsbuild supports build with environment config. When there's not listed environment or only one environment, the builder will the default environment's config. If there're more than one environment, you must specify the environment with environment option to tell the builder which environment's config to use.

// .storybook/main.mjs

const config = {
  framework: {
    name: 'storybook-react-rsbuild',
    options: {
      builder: {
        environment: 'web-storybook',
      },
    },
  },
}

export default config

Customize builder's Rsbuild config

You can also override the merged Rsbuild config:

// use `mergeRsbuildConfig` to recursively merge Rsbuild options
import { mergeRsbuildConfig } from '@rsbuild/core'

const config = {
  async rsbuildFinal(config, { configType }) {
    // Be sure to return the customized config
    return mergeRsbuildConfig(config, {
      // Customize the Rsbuild config for Storybook
      source: {
        alias: { foo: 'bar' },
      },
    })
  },
}

export default config

The rsbuildFinal function will give you config which is the combination of your project's Rsbuild config and the builder's own Rsbuild config. You can tweak this as you want, for example to set up aliases, add new plugins etc.

The configType variable will be either "DEVELOPMENT" or "PRODUCTION".

The function should return the updated Rsbuild configuration.

Troubleshooting

Error caused by bundling unexpected files

Note

Rspack starts to support webpackInclude magic comment, this trouble won't exists since 0.0.7

Because Rspack temporarily does not support the webpackInclude magic comment, non-story files may be bundled, which could lead to build failures. These files can be ignored using rspack.IgnorePlugin (see exmaple #19).

// .storybook/main.js
import path from 'path'
import { mergeRsbuildConfig } from '@rsbuild/core'

export default {
  framework: 'storybook-react-rsbuild',
  async rsbuildFinal(config) {
    return mergeRsbuildConfig(config, {
      tools: {
        rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
          return mergeConfig(config, {
            plugins: [
              new rspack.IgnorePlugin({
                checkResource: (resource, context) => {
                  // for example, ignore all markdown files
                  const absPathHasExt = path.extname(resource)
                  if (absPathHasExt === '.md') {
                    return true
                  }

                  return false
                },
              }),
            ],
          })
        },
      },
    })
  },
}

Roadmap

Features

Support TS type check (fork-ts-checker-webpack-plugin) (supported in 0.0.4)
Support more frameworks (Preact / Svelte / vanilla html / Lit)

Rspack support

Support webpackInclude magic comment (supported in 0.0.7)
Support persistent cache
Support lazy compilation
Support virtual modules
Support module.unknownContextCritical
Support compilation.dependencyTemplates.set for react-docgen-typescript (supported in a workaround)

Credits

Some code is copied or modified from storybookjs/storybook.

License

MIT

	await readTemplate(
	require.resolve(
	'storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars',
	),
	),

rspack-contrib / storybook-rsbuild Goto Github PK

storybook-rsbuild's Introduction

Storybook × Rsbuild

Usage

Use with React (in a existing Rsbuild project)

Use with Vue 3 (in a existing Rsbuild project)

Builder options

rsbuildConfigPath

lazyCompilation

environment

Customize builder's Rsbuild config

Troubleshooting

Error caused by bundling unexpected files

Roadmap

Features

Rspack support

Credits

License

storybook-rsbuild's People

Contributors

Stargazers

Watchers

Forkers

storybook-rsbuild's Issues

Reproduction

Error

Additional resouces

Reproduction

Error message

Expected behavior

Background

Reproduction steps

Root causes

Workaround

How to reproduce

Version used

Reproduction

Problem

Temporary solution

Reproduction

Steps

Details

Additional information

Problem

Workaround

Screenshot of built

Build

SB team response

Recommend Projects

Recommend Topics

Recommend Org

`rsbuildConfigPath`

`lazyCompilation`

`environment`