importers[path] is not a function

[0line]

System Info

Storybook Environment Info:

System:
OS: Windows 11 10.0.22631
CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
Binaries:
Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD <----- active
pnpm: 8.7.5 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (120.0.2210.91)
npmPackages:
@storybook/addon-essentials: ^7.6.7 => 7.6.7
@storybook/addon-interactions: ^7.6.7 => 7.6.7
@storybook/addon-links: ^7.6.7 => 7.6.7
@storybook/addon-mdx-gfm: ^7.6.7 => 7.6.7
@storybook/addon-onboarding: ^1.0.10 => 1.0.10
@storybook/blocks: ^7.6.7 => 7.6.7
@storybook/react: ^7.6.7 => 7.6.7
@storybook/react-webpack5: ^7.6.7 => 7.6.7
@storybook/test: ^7.6.7 => 7.6.7
storybook: ^7.6.7 => 7.6.7
storybook-react-rspack: 7.0.0-rc.25 => 7.0.0-rc.25

Details

Hi, I am using the document to switch from webpack to rspack/rsbuild (https://www.rspack.dev/guide/migrate-storybook.html), however when I launch npm run storybook, it shows me the following error. I am using react 18 with the base provided by rsbuild (https://rsbuild.dev/guide/framework/react)

I reported the same error with the storybook team because I didn't know who to contact, I just have to tell them that with webpack it works correctly, I understand that the rspack support is experimental but it would be great to have official support soon.
storybookjs/storybook#25419

Reproduce link

No response

Reproduce Steps

1.-Install react with the help of your guide https://rsbuild.dev/guide/framework/react
2.- Configure main.ts of storybook as shown in your guide. https://www.rspack.dev/guide/migrate-storybook.html
3.- Npm run storybook

[JSerFeng]

Currently the best way to use Storybook with Rspack is by using Modern.js
storybook.
https://modernjs.dev/builder/guide/advanced/storybook.html
Compare to react-rspack, Modern.js provide a easy way to fallback to Webpack. But it may take you a little time to learn what is Modern.js builder. ( Modern.js builder is the predecessor of rsbuild )

[JSerFeng]

In your example, you can simplely change the storybook-react-rspack at the framework.name field to @modern-js/storybook.
And Rspack is using SWC by default so you don't need to enable SWC in the config file, it has no effect for now.
And you rspack config, you can move it into framework.options.builderConfig.tools.rspack, you can see the detail here and modern.js builder config here

[kirainmoe]

I'm having the same problem here. But only on Windows, Linux works fine. So I guess there may be some problems in path resolution difference between Windows and *nix.

After researching and diving into the source code of storybook-react-rspack, I found the problem is that iframe previewer's importFn is trying to indexing an importer function from importer map with a posix-style forward slash relative path, but the importer map is indexed by windows-style backward slash relative path, thus returns an undefined and throws error:

And the importer map is created in storybook-builder-rspack package. I could only find an early version of this package in this repo: https://github.com/rspack-contrib/storybook-rspack

https://github.com/rspack-contrib/storybook-rspack/blob/1d642f496cb3f04f4010e761e81b0e53b27a618b/code/lib/builder-rspack/src/to-importFn.ts#L24

const relativePath = path.relative(process.cwd(), file);

This line transformed the absolute path of story to a relative path with path.relative, and on Windows platform path.relative will transform / to \\. One possible solution is to add a slash() to transformed relative path to force the path be presented in POSIX form. You can refer to this pull request for the fix: https://github.com/rspack-contrib/storybook-rspack/pull/4

After applying the fix above I managed to get storybook running on Windows with rspack.

And there is a temporary solution for those who may still be concerned about this issue: if you use pnpm, you can temporarily override storybook-preset-react-rspack and storybook-builder-rspack packages by adding the following content to package.json then run a pnpm i:

  "pnpm": {
    "overrides": {
      "storybook-preset-react-rspack": "npm:@ayaseaki/storybook-preset-react-rspack",
      "storybook-builder-rspack": "npm:@ayaseaki/storybook-builder-rspack"
    }
  }

[kirainmoe]

BTW, I also had a look at modern.js's storybook plugin and found similar code, which indicates that migrating to modernjs may not solve the problem: https://github.com/web-infra-dev/modern.js/blob/eec57928a35019e5485087d91dc345a55d05cadb/packages/storybook/builder/src/utils.ts#L84

But I didn't confirm that. I couldn't even get modernjs's storybook running on my Windows XD

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[JSerFeng]

Please use Modern.js storybook, it has both Rspack and Webpack backend, it should solve the issue

[kirainmoe]

Unfortunately, modern.js storybook has a similar problem. web-infra-dev/modern.js#5477

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[krutoo]

Any updates?

[JSerFeng]

Please use rsbuild-storybook instead https://rsbuild.dev/community/releases/v0-7#support-for-storybook