feat: migrate to vite v6 (#1012)

Blocking issues: - [x] `polyfillModulePreload is deprecated. Use modulePreload.polyfill instead. (x6)` - [x] rscRsdwPlugin parse code is somehow incorrect, I think the code it receives is already a bundlered code, that's why `const index = code.indexOf('function requireAsyncModule(id)');` will get `-1` - [x] vite issue. vitejs/vite#18361 - [x] no styling in dev. 21_create-pages_standalone spec fails. - [x] react-error-boundary. ssr-catch-error spec fails. Other issues: - [x] proper fix for `resolve.conditions` hack - [x] proper fix for `vite-loader.ts` hack - [ ] drop `viteServer.hot`. #1012 (comment) --------- Co-authored-by: daishi <[email protected]> Co-authored-by: Daishi Kato <[email protected]> Co-authored-by: Tyler <[email protected]>
dai-shi · Dec 27, 2024 · ec87f81 · ec87f81
1 parent 25d418b
commit ec87f81
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 315 deletions.
diff --git a/e2e/fixtures/ssr-catch-error/vite.config.ts b/e2e/fixtures/ssr-catch-error/vite.config.ts
@@ -1,22 +1,7 @@
-export default ({ mode }: { mode: string }) => {
-  if (mode === 'development') {
-    return {
-      plugins: [
-        {
-          name: 'externalize-react-error-boundary',
-          configResolved(config: any) {
-            // TODO HACK temporary solution until v0.22.0
-            if (
-              config.cacheDir.endsWith(
-                'node_modules/.vite/waku-dev-server-main',
-              )
-            ) {
-              config.ssr.noExternal = ['react-error-boundary'];
-            }
-          },
-        },
-      ],
-    };
-  }
-  return {};
+export default {
+  ssr: {
+    resolve: {
+      conditions: ['module', 'node'],
+    },
+  },
 };
diff --git a/examples/12_nossr/package.json b/examples/12_nossr/package.json
@@ -20,6 +20,6 @@
     "autoprefixer": "10.4.20",
     "tailwindcss": "3.4.17",
     "typescript": "5.7.2",
-    "vite": "5.4.10"
+    "vite": "6.0.6"
   }
 }
diff --git a/examples/37_css/package.json b/examples/37_css/package.json
@@ -22,7 +22,7 @@
     "@types/react-dom": "19.0.2",
     "@vanilla-extract/vite-plugin": "4.0.18",
     "typescript": "5.7.2",
-    "vite": "5.4.10",
+    "vite": "6.0.6",
     "vite-plugin-stylex-dev": "0.7.5"
   }
 }
diff --git a/examples/41_path-alias/package.json b/examples/41_path-alias/package.json
@@ -18,7 +18,7 @@
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "typescript": "5.7.2",
-    "vite": "5.4.10",
+    "vite": "6.0.6",
     "vite-tsconfig-paths": "5.1.4"
   }
 }
diff --git a/package.json b/package.json
@@ -47,10 +47,5 @@
     "typescript": "^5.7.2",
     "wait-port": "^1.1.0",
     "waku": "workspace:*"
-  },
-  "pnpm": {
-    "overrides": {
-      "vite": "5.4.10"
-    }
   }
 }
diff --git a/packages/waku/package.json b/packages/waku/package.json
@@ -92,14 +92,14 @@
     "dotenv": "16.4.7",
     "hono": "4.6.14",
     "rsc-html-stream": "0.0.4",
-    "vite": "5.4.10"
+    "vite": "6.0.6"
   },
   "devDependencies": {
     "@netlify/functions": "^3.0.0",
     "@swc/cli": "^0.5.2",
     "rollup": "^4.29.1",
     "ts-expect": "^1.3.0",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.0-beta.3"
   },
   "peerDependencies": {
     "react": "~19.0.0",

diff --git a/packages/waku/src/cli.ts b/packages/waku/src/cli.ts
@@ -220,6 +220,7 @@ async function loadConfig(): Promise<Config> {
   if (!existsSync(CONFIG_FILE)) {
     return {};
   }
+  // FIXME can we avoid using vite to load the config?
   const { loadServerFile } = await import('./lib/utils/vite-loader.js');
   const file = pathToFileURL(path.resolve(CONFIG_FILE)).toString();
   return (await loadServerFile(file)).default;

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-entries.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-entries.ts
@@ -19,9 +19,7 @@ export function rscEntriesPlugin(opts: {
   moduleMap: Record<string, string>;
 }): Plugin {
   const codeToPrepend = `
-try {
-  globalThis.AsyncLocalStorage = (await import('node:async_hooks')).AsyncLocalStorage;
-} catch (e) {}
+globalThis.AsyncLocalStorage = require('node:async_hooks').AsyncLocalStorage;
 `;
   let codeToAppend = `
 export function loadModule(id) {

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts
@@ -9,8 +9,9 @@ const patchRsdw = (code: string, type: 'SERVER' | 'CLIENT') => {
   if (index === -1) {
     throw new Error('rscRsdwPlugin: Unexpected code structure');
   }
-  code =
-    code.slice(0, index) +
+
+  return code.replaceAll(
+    'function requireAsyncModule(id)',
     `
 globalThis.__WAKU_${type}_MODULE_LOADING__ ||= new Map();
 globalThis.__WAKU_${type}_MODULE_CACHE__ ||= new Map();
@@ -26,9 +27,9 @@ globalThis.__WAKU_${type}_CHUNK_LOAD__ ||= (id) => {
   return globalThis.__WAKU_${type}_MODULE_LOADING__.get(id);
 };
 globalThis.__WAKU_${type}_REQUIRE__ ||= (id) => globalThis.__WAKU_${type}_MODULE_CACHE__.get(id);
-` +
-    code.slice(index);
-  return code;
+function requireAsyncModule(id)
+`,
+  );
 };
 
 export function rscRsdwPlugin(): Plugin {

diff --git a/packages/waku/src/lib/utils/vite-loader.ts b/packages/waku/src/lib/utils/vite-loader.ts
@@ -1,15 +1,17 @@
 import { createServer as createViteServer } from 'vite';
+
 import { fileURLToFilePath } from '../utils/path.js';
 
 export const loadServerFile = async (fileURL: string) => {
   const vite = await createViteServer({
     ssr: {
       external: ['waku'],
     },
+    server: { middlewareMode: true, watch: null },
   });
   try {
     return vite.ssrLoadModule(fileURLToFilePath(fileURL));
   } finally {
-    await vite.close();
+    await vite.ws.close();
   }
 };
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -29,6 +29,6 @@
     "shiki": "^1.24.4",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
-    "vite": "5.4.10"
+    "vite": "6.0.6"
   }
 }