fix: works with react <= 18

package.json

@@ -28,5 +28,5 @@
     "typescript": "^5.3.2",
     "vitest": "^1.6.0"
   },
-  "packageManager": "pnpm@8.15.6"
+  "packageManager": "pnpm@9.5.0"
 }

packages/builder-rsbuild/src/index.ts

@@ -9,8 +9,10 @@ import rsbuildConfig, {
   type RsbuildBuilderOptions,
 } from './preview/iframe-rsbuild.config'
 import { corePath } from 'storybook/core-path'
+import { applyReactShims } from './react-shims'
 
 import prettyTime from 'pretty-hrtime'
+import { mergeRsbuildConfig } from '@rsbuild/core'
 
 export * from './types'
 export * from './preview/virtual-module-mapping'
@@ -42,15 +44,18 @@ export const executor = {
 }
 
 export const rsbuild = async (_: unknown, options: RsbuildBuilderOptions) => {
-  const defaultConfig = await rsbuildConfig(options)
   const { presets } = options
+  let defaultConfig = await rsbuildConfig(options)
+  const shimsConfig = await applyReactShims(defaultConfig, options)
+  defaultConfig = mergeRsbuildConfig(defaultConfig, shimsConfig)
+
   const finalDefaultConfig = await presets.apply(
     'rsbuildFinal',
     defaultConfig,
     options,
   )
 
-  return finalDefaultConfig
+  return mergeRsbuildConfig(finalDefaultConfig)
 }
 
 export const getConfig: RsbuildBuilder['getConfig'] = async (options) => {

packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts

@@ -267,6 +267,14 @@ export default async (
           : isProd
         config.optimization.moduleIds = 'named'
 
+        // If using react-dom-shim with React 16/17, `useId` won't be exported in dependency,
+        // which will cause an HarmonyLinkingError. Set `exportsPresence` to `false` to allow
+        // doing this runtime detection.
+        config.module ??= {}
+        config.module.parser ??= {}
+        config.module.parser.javascript ??= {}
+        config.module.parser.javascript.exportsPresence = false
+
         appendPlugins(
           [
             new rspack.ProvidePlugin({

packages/builder-rsbuild/src/react-shims.ts

@@ -0,0 +1,64 @@
+/**
+ * Copied from https://github.com/storybookjs/storybook/blob/main/code/lib/react-dom-shim/src/preset.ts
+ * We had to copy this file because there's no rsbuildFinal there.
+ */
+
+import type { Options } from 'storybook/internal/types'
+import { join, dirname, isAbsolute } from 'path'
+import { readFile } from 'fs/promises'
+import type { RsbuildConfig } from '@rsbuild/core'
+
+/**
+ * Get react-dom version from the resolvedReact preset, which points to either
+ * a root react-dom dependency or the react-dom dependency shipped with addon-docs
+ */
+const getIsReactVersion18or19 = async (options: Options) => {
+  const { legacyRootApi } =
+    (await options.presets.apply<{ legacyRootApi?: boolean } | null>(
+      'frameworkOptions',
+    )) || {}
+
+  if (legacyRootApi) {
+    return false
+  }
+
+  const resolvedReact = await options.presets.apply<{ reactDom?: string }>(
+    'resolvedReact',
+    {},
+  )
+  const reactDom =
+    resolvedReact.reactDom || dirname(require.resolve('react-dom/package.json'))
+
+  if (!isAbsolute(reactDom)) {
+    // if react-dom is not resolved to a file we can't be sure if the version in package.json is correct or even if package.json exists
+    // this happens when react-dom is resolved to 'preact/compat' for example
+    return false
+  }
+
+  const { version } = JSON.parse(
+    await readFile(join(reactDom, 'package.json'), 'utf-8'),
+  )
+  return (
+    version.startsWith('18') ||
+    version.startsWith('19') ||
+    version.startsWith('0.0.0')
+  )
+}
+
+export const applyReactShims = async (
+  config: any,
+  options: Options,
+): Promise<RsbuildConfig> => {
+  const isReactVersion18 = await getIsReactVersion18or19(options)
+  if (isReactVersion18) {
+    return config
+  }
+
+  return {
+    source: {
+      alias: {
+        '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
+      },
+    },
+  }
+}