fix: waku build will bundle browser files in server side

dai-shi · Sep 25, 2024 · f7ef259 · f7ef259
1 parent 3fc8e74
commit f7ef259
Show file tree

Hide file tree

Showing 15 changed files with 191 additions and 0 deletions.
diff --git a/e2e/fixtures/exports-condition/README.md b/e2e/fixtures/exports-condition/README.md
@@ -0,0 +1 @@
+# Exports Condition
diff --git a/e2e/fixtures/exports-condition/modules/my-module/dist/index.browser.js b/e2e/fixtures/exports-condition/modules/my-module/dist/index.browser.js
@@ -0,0 +1,2 @@
+console.log('browser runtime called')
+export const runtime = 'browser'
diff --git a/e2e/fixtures/exports-condition/modules/my-module/dist/index.d.ts b/e2e/fixtures/exports-condition/modules/my-module/dist/index.d.ts
@@ -0,0 +1 @@
+export const runtime: string;
diff --git a/e2e/fixtures/exports-condition/modules/my-module/dist/index.js b/e2e/fixtures/exports-condition/modules/my-module/dist/index.js
@@ -0,0 +1,2 @@
+console.log('server runtime called')
+export const runtime = 'server'
diff --git a/e2e/fixtures/exports-condition/modules/my-module/package.json b/e2e/fixtures/exports-condition/modules/my-module/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "my-module",
+  "private": true,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": "./dist/index.browser.js",
+      "import": "./dist/index.js"
+    }
+  }
+}
diff --git a/e2e/fixtures/exports-condition/package.json b/e2e/fixtures/exports-condition/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ssr-basic",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0-rc-d6cb4e77-20240911",
+    "react-dom": "19.0.0-rc-d6cb4e77-20240911",
+    "react-server-dom-webpack": "19.0.0-rc-d6cb4e77-20240911",
+    "waku": "workspace:*",
+    "my-module": "link:./modules/my-module"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
+  }
+}
diff --git a/e2e/fixtures/exports-condition/src/components/App.tsx b/e2e/fixtures/exports-condition/src/components/App.tsx
@@ -0,0 +1,23 @@
+import { runtime } from 'my-module';
+import { Client } from './Client.js';
+
+const App = ({ name }: { name: string }) => {
+  return (
+    <html>
+      <head>
+        <title>Waku example</title>
+      </head>
+      <body>
+        <div
+          style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}
+        >
+          <h1 data-testid="app-name">{name}</h1>
+          <div data-testid="server-runtime">{runtime}</div>
+          <Client />
+        </div>
+      </body>
+    </html>
+  );
+};
+
+export default App;
diff --git a/e2e/fixtures/exports-condition/src/components/Client.tsx b/e2e/fixtures/exports-condition/src/components/Client.tsx
@@ -0,0 +1,15 @@
+'use client';
+import { runtime } from 'my-module';
+import { useEffect, useState } from 'react';
+
+export const Client = () => {
+  // avoid hydration error, since runtime is different between client/server
+  const [mount, setMount] = useState(false);
+  useEffect(() => {
+    setMount(true);
+  }, []);
+  if (mount) {
+    return <div data-testid="client-runtime">{runtime}</div>;
+  }
+  return null;
+};
diff --git a/e2e/fixtures/exports-condition/src/entries.tsx b/e2e/fixtures/exports-condition/src/entries.tsx
@@ -0,0 +1,28 @@
+import { lazy } from 'react';
+import { defineEntries } from 'waku/server';
+import { Slot } from 'waku/client';
+
+const App = lazy(() => import('./components/App.js'));
+
+export default defineEntries(
+  // renderEntries
+  async (input) => {
+    return {
+      App: <App name={input || 'Waku'} />,
+    };
+  },
+  // getBuildConfig
+  async () => [{ pathname: '/', entries: [{ input: '' }] }],
+  // getSsrConfig
+  async (pathname) => {
+    switch (pathname) {
+      case '/':
+        return {
+          input: '',
+          html: <Slot id="App" />,
+        };
+      default:
+        return null;
+    }
+  },
+);
diff --git a/e2e/fixtures/exports-condition/src/main.tsx b/e2e/fixtures/exports-condition/src/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { Root, Slot } from 'waku/client';
+
+const rootElement = (
+  <StrictMode>
+    <Root>
+      <Slot id="App" />
+    </Root>
+  </StrictMode>
+);
+
+if ((globalThis as any).__WAKU_HYDRATE__) {
+  hydrateRoot(document, rootElement);
+} else {
+  createRoot(document as any).render(rootElement);
+}
diff --git a/e2e/fixtures/exports-condition/tsconfig.json b/e2e/fixtures/exports-condition/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "target": "esnext",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "types": ["react/experimental"],
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  },
+  "include": ["./src", "./vite.config.ts"]
+}
diff --git a/e2e/fixtures/exports-condition/vite.config.ts b/e2e/fixtures/exports-condition/vite.config.ts
@@ -0,0 +1,10 @@
+export default ({ mode }: { mode: string }) => {
+  if (mode === 'development') {
+    return {
+      optimizeDeps: {
+        exclude: ['ai/rsc'],
+      },
+    };
+  }
+  return {};
+};
diff --git a/packages/waku/src/lib/builder/build.ts b/packages/waku/src/lib/builder/build.ts
@@ -252,6 +252,9 @@ const buildServerBundle = async (
     esbuild: {
       jsx: 'automatic',
     },
+    resolve: {
+      conditions: ['import', 'module', 'default', 'production'],
+    },
     define: {
       'process.env.NODE_ENV': JSON.stringify('production'),
     },
@@ -312,6 +315,9 @@ const buildSsrBundle = async (
     esbuild: {
       jsx: 'automatic',
     },
+    resolve: {
+      conditions: ['import', 'module', 'default', 'production'],
+    },
     define: {
       'process.env.NODE_ENV': JSON.stringify('production'),
     },
@@ -374,6 +380,9 @@ const buildClientBundle = async (
       rscTransformPlugin({ isClient: true, isBuild: true, serverEntryFiles }),
       ...deployPlugins(config),
     ],
+    resolve: {
+      conditions: ['import', 'module', 'default', 'browser', 'production'],
+    },
     build: {
       emptyOutDir: !partial,
       outDir: joinPath(rootDir, config.distDir, DIST_PUBLIC),

diff --git a/packages/waku/src/lib/middleware/dev-server-impl.ts b/packages/waku/src/lib/middleware/dev-server-impl.ts
@@ -110,6 +110,9 @@ const createMainViteServer = (
         rscTransformPlugin({ isClient: true, isBuild: false }),
         rscHmrPlugin(),
       ],
+      resolve: {
+        conditions: ['import', 'module', 'default', 'production'],
+      },
       optimizeDeps: {
         include: ['react-server-dom-webpack/client', 'react-dom'],
         exclude: ['waku', 'rsc-html-stream/server'],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml