Broken when dev with type: module

[yf-yang]

Reproduction

https://github.com/yf-yang/rsbuild-storybook-esm

Note: I added type: module in the package.json, others are remaining the same with the example

Error

Execute pnpm storybook
The server starts successfully, then each component throws "ReferenceError: require is not defined"

Additional resouces

Seems there is a similar old bug storybookjs/storybook#14877

[nate-summercook]

I can confirm the same issue on my side. Trying to migrate from webpack to rsbuild and using type: module. I also use module federation and the motivation to move to rsbuild is of course speed :)
Please fix this. From my investigations it seems that storybook imports the dist/index.js file instead of the dist/index.mjs which of course won't work. Why that is I don't know.

[yf-yang]

@nate-summercook @fi3ework

As a temporary workaround, I can use pnpm patch to solve the problem.
pnpm patch modifies a installed package's released code directly.

Add storybook-builder-rsbuild as dev dependency (That helps to find the package in node_modules)
Then,

diff --git a/templates/virtualModuleModernEntry.js.handlebars b/templates/virtualModuleModernEntry.js.handlebars
index 1224d3d015df76df07e8074d9328ae19174959ee..e5014d3741dfe116ccf0fae9273457966bf3dd71 100644
--- a/templates/virtualModuleModernEntry.js.handlebars
+++ b/templates/virtualModuleModernEntry.js.handlebars
@@ -5,8 +5,8 @@ import { createBrowserChannel } from '@storybook/channels';
 
 import { importFn } from './{{storiesFilename}}';
 
-const getProjectAnnotations = () =>
-  composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
+const getProjectAnnotations = async () =>
+  composeConfigs([{{#each previewAnnotations}}await import('{{this}}'),{{/each}}]);
 
 const channel = createBrowserChannel({ page: 'preview' });
 addons.setChannel(channel);

I think the diff clearly illustrates the cause of the bug, but I don't know how the module type could be correctly pass to the template. If there are any suggestions I can offer a fix.

[yf-yang]

All right, I don't know how to load the package.json then pass to getVirtualModules. Waiting for the maintainer to fix/give instructions.

[fi3ework]

I took a look into the code and took a test locally.

Using async writing work fine for module and commonjs type. I haven't test will webpack-builder will encounter the same issue which has the same require code now. Also wonder why storybookjs/storybook#18620 is reverted in the latest code.

const getProjectAnnotations = async () => {
  const configs = await Promise.all([{{#each previewAnnotations}}import('{{this}}'),{{/each}}])
  return composeConfigs(configs);
}

[fi3ework]

• If webpack-builder encounter the same issue, this should be also sync up to storybookjs/storybook.
• If webpack-builder not encounter the same issue, we should figure out why it works in webpack, it might be a difference between Rspack and webpack.

[yf-yang]

Webpack + babel example (no issue):
https://github.com/yf-yang/rsbuild-storybook-esm/tree/webpack-test

Hope it helps.

[nate-summercook]

I can confirm that that error is gone, now I have different issues (#29 & #30)