fix(ssr): support externalized builtins for webworker (#15656)

vitejs · Jan 19, 2024 · 639bbd6 · 639bbd6
1 parent 35ae4f8
commit 639bbd6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -136,7 +136,11 @@ export function resolvePlugin(resolveOptions: InternalResolveOptions): Plugin {
     preferRelative = false,
   } = resolveOptions
 
-  const { target: ssrTarget, noExternal: ssrNoExternal } = ssrConfig ?? {}
+  const {
+    target: ssrTarget,
+    noExternal: ssrNoExternal,
+    external: ssrExternal,
+  } = ssrConfig ?? {}
 
   // In unix systems, absolute paths inside root first needs to be checked as an
   // absolute URL (/root/root/path-to-file) resulting in failed checks before falling
@@ -395,7 +399,12 @@ export function resolvePlugin(resolveOptions: InternalResolveOptions): Plugin {
         // externalize if building for SSR, otherwise redirect to empty module
         if (isBuiltin(id)) {
           if (ssr) {
-            if (ssrNoExternal === true) {
+            if (
+              ssrNoExternal === true &&
+              // if both noExternal and external are true, noExternal will take the higher priority and bundle it.
+              // only if the id is explicitly listed in external, we will externalize it and skip this error.
+              (ssrExternal === true || !ssrExternal?.includes(id))
+            ) {
               let message = `Cannot bundle Node.js built-in "${id}"`
               if (importer) {
                 message += ` imported from "${path.relative(

diff --git a/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts b/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts
@@ -23,6 +23,13 @@ test('respects browser export', async () => {
   )
 })
 
+test('supports nodejs_compat', async () => {
+  await page.goto(url)
+  expect(await page.textContent('.nodejs-compat')).toMatch(
+    '[success] nodejs compat',
+  )
+})
+
 test.runIf(isBuild)('inlineDynamicImports', () => {
   const dynamicJsContent = findAssetFile(/dynamic-[-\w]+\.js/, 'worker')
   expect(dynamicJsContent).toBe('')

diff --git a/playground/ssr-webworker/src/entry-worker.jsx b/playground/ssr-webworker/src/entry-worker.jsx
@@ -1,3 +1,4 @@
+import { equal } from 'node:assert'
 import { msg as linkedMsg } from '@vitejs/test-resolve-linked'
 import browserExportsMessage from '@vitejs/test-browser-exports'
 import workerExportsMessage from '@vitejs/test-worker-exports'
@@ -18,6 +19,7 @@ addEventListener('fetch', function (event) {
     <p>dynamic: ${loaded}</p>
     <p class="browser-exports">${browserExportsMessage}</p>
     <p class="worker-exports">${workerExportsMessage}</p>
+    <p class="nodejs-compat">${equal('a', 'a') || '[success] nodejs compat'}</p>
     `,
       {
         headers: {

diff --git a/playground/ssr-webworker/vite.config.js b/playground/ssr-webworker/vite.config.js
@@ -11,6 +11,9 @@ export default defineConfig({
   ssr: {
     target: 'webworker',
     noExternal: ['this-should-be-replaced-by-the-boolean'],
+    // Some webworker builds may choose to externalize node builtins as they may be implemented
+    // in the runtime, and so we can externalize it when bundling.
+    external: ['node:assert'],
   },
   plugins: [
     {

diff --git a/playground/ssr-webworker/worker.js b/playground/ssr-webworker/worker.js
@@ -10,6 +10,8 @@ export async function createServer(port) {
   const mf = new Miniflare({
     scriptPath: path.resolve(__dirname, 'dist/worker/entry-worker.js'),
     port,
+    modules: true,
+    compatibilityFlags: ['nodejs_compat'],
   })
   await mf.ready
   return { mf }