fix: works with react <= 18 (#38)

rspack-contrib · Jul 12, 2024 · 9ff8d83 · 9ff8d83
1 parent 38f1eed
commit 9ff8d83
Show file tree

Hide file tree

Showing 127 changed files with 8,660 additions and 5,424 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,6 @@
     "build": "pnpm --filter \"./packages/**\" run prep --optimized",
     "check": "pnpm --parallel --filter \"./packages/**\" run check",
     "dev": "pnpm --parallel --filter \"./packages/**\" run prep --watch",
-    "prepare": "pnpm run build && simple-git-hooks",
     "test:sandboxes-build": "pnpm --parallel --filter \"./sandboxes/**\" run build:storybook"
   },
   "simple-git-hooks": {
@@ -28,5 +27,5 @@
     "typescript": "^5.3.2",
     "vitest": "^1.6.0"
   },
-  "packageManager": "pnpm@8.15.6"
+  "packageManager": "pnpm@9.5.0"
 }
diff --git a/packages/builder-rsbuild/package.json b/packages/builder-rsbuild/package.json
@@ -57,7 +57,8 @@
   ],
   "scripts": {
     "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts",
+    "prepare": "pnpm run prep --optimized"
   },
   "dependencies": {
     "@rsbuild/plugin-type-check": "1.0.0-alpha.9",

diff --git a/packages/builder-rsbuild/src/index.ts b/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,21 @@ 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,
+  ) as rsbuildReal.RsbuildConfig
+
   const finalDefaultConfig = await presets.apply(
     'rsbuildFinal',
     defaultConfig,
     options,
   )
 
-  return finalDefaultConfig
+  return mergeRsbuildConfig(finalDefaultConfig)
 }
 
 export const getConfig: RsbuildBuilder['getConfig'] = async (options) => {

diff --git a/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts b/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({

diff --git a/packages/builder-rsbuild/src/react-shims.ts b/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 | undefined> => {
+  const isReactVersion18 = await getIsReactVersion18or19(options)
+  if (isReactVersion18) {
+    return undefined
+  }
+
+  return {
+    source: {
+      alias: {
+        '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
+      },
+    },
+  }
+}
diff --git a/packages/react-rsbuild/package.json b/packages/react-rsbuild/package.json
@@ -50,7 +50,8 @@
   ],
   "scripts": {
     "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts",
+    "prepare": "pnpm run prep --optimized"
   },
   "dependencies": {
     "@storybook/react": "^8.2.1",

diff --git a/packages/vue3-rsbuild/package.json b/packages/vue3-rsbuild/package.json
@@ -46,7 +46,8 @@
   ],
   "scripts": {
     "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts",
+    "prepare": "pnpm run prep --optimized"
   },
   "dependencies": {
     "@storybook/vue3": "^8.2.1",