fix(nextjs): avoid vendored React in eval (#251)

Author: Anber

.changeset/quiet-hounds-drive.md

@@ -0,0 +1,5 @@
+---
+'@wyw-in-js/nextjs': patch
+---
+
+Fix Next.js eval crashes by defaulting `importOverrides` for `react` (and JSX runtimes) so build-time evaluation resolves React via Node instead of Next's vendored RSC runtime.

packages/nextjs/src/__tests__/withWyw.test.ts

@@ -17,8 +17,14 @@ describe('withWyw', () => {
 
     if (Array.isArray(tsRule)) {
       expect(tsRule[0].loader).toContain('turbopack-loader');
+      expect(tsRule[0].options.importOverrides).toMatchObject({
+        react: { mock: 'react' },
+      });
     } else {
       expect(tsRule.loaders[0].loader).toContain('turbopack-loader');
+      expect(tsRule.loaders[0].options.importOverrides).toMatchObject({
+        react: { mock: 'react' },
+      });
     }
   });
 
@@ -76,6 +82,41 @@ describe('withWyw', () => {
 
     expect(use).toHaveLength(2);
     expect(use[1].loader).toContain('webpack-loader');
+    expect(use[1].options.importOverrides).toMatchObject({
+      react: { mock: 'react' },
+    });
+  });
+
+  it('merges default React importOverrides with user overrides', () => {
+    const config: Configuration = {
+      module: {
+        rules: [
+          {
+            use: [{ loader: 'next-swc-loader' }],
+          },
+        ],
+      },
+    };
+
+    const nextConfig = withWyw(
+      {},
+      {
+        loaderOptions: {
+          importOverrides: {
+            react: { mock: 'preact/compat' },
+          },
+        },
+      }
+    );
+
+    const result = nextConfig.webpack!(config, { dev: true } as any);
+    const use = (result.module!.rules![0] as RuleSetRule).use as any[];
+
+    expect(use[1].options.importOverrides).toMatchObject({
+      react: { mock: 'preact/compat' },
+      'react/jsx-runtime': { mock: 'react/jsx-runtime' },
+      'react/jsx-dev-runtime': { mock: 'react/jsx-dev-runtime' },
+    });
   });
 
   it('converts loader+options rules to use[] when injecting', () => {

packages/nextjs/src/index.ts

@@ -9,6 +9,12 @@ const DEFAULT_EXTENSION = '.wyw-in-js.module.css';
 
 const DEFAULT_TURBO_RULE_KEYS = ['*.js', '*.jsx', '*.ts', '*.tsx'];
 
+const DEFAULT_REACT_IMPORT_OVERRIDES = {
+  react: { mock: 'react' },
+  'react/jsx-runtime': { mock: 'react/jsx-runtime' },
+  'react/jsx-dev-runtime': { mock: 'react/jsx-dev-runtime' },
+} satisfies WywWebpackLoaderOptions['importOverrides'];
+
 const PLACEHOLDER_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx']);
 const PLACEHOLDER_IGNORED_DIRS = new Set([
   '.git',
@@ -275,11 +281,17 @@ function injectWywLoader(
     presets: [nextBabelPreset],
   };
 
+  const userImportOverrides = wywNext.loaderOptions?.importOverrides;
+  const importOverrides = userImportOverrides
+    ? { ...DEFAULT_REACT_IMPORT_OVERRIDES, ...userImportOverrides }
+    : DEFAULT_REACT_IMPORT_OVERRIDES;
+
   const loaderOptions = {
     cssImport: 'import',
     ...wywNext.loaderOptions,
     babelOptions,
     extension,
+    importOverrides,
     sourceMap: wywNext.loaderOptions?.sourceMap ?? nextOptions.dev,
   } satisfies WywWebpackLoaderOptions;
 
@@ -397,10 +409,17 @@ function injectWywTurbopackRules(
 
   assertNoFunctions(userOptions, 'turbopackLoaderOptions');
 
+  const userImportOverrides = isPlainObject(userOptions.importOverrides)
+    ? (userOptions.importOverrides as Record<string, unknown>)
+    : undefined;
+
   const loaderOptions = {
     babelOptions: { presets: [nextBabelPreset] },
     sourceMap: process.env.NODE_ENV !== 'production',
     ...userOptions,
+    importOverrides: userImportOverrides
+      ? { ...DEFAULT_REACT_IMPORT_OVERRIDES, ...userImportOverrides }
+      : DEFAULT_REACT_IMPORT_OVERRIDES,
   };
 
   const useTurbopackConfig = shouldUseTurbopackConfig(nextConfig);