fix: inline dynamic imports for ssr-webworker (fixes #9385) (#9401)

vitejs · Jul 28, 2022 · cd69358 · cd69358
1 parent 122c6e7
commit cd69358
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
@@ -444,11 +444,13 @@ async function doBuild(
         )
       }
 
-      const ssrWorkerBuild = ssr && config.ssr?.target !== 'webworker'
-      const cjsSsrBuild = ssr && config.ssr?.format === 'cjs'
+      const ssrNodeBuild = ssr && config.ssr.target === 'node'
+      const ssrWorkerBuild = ssr && config.ssr.target === 'webworker'
+      const cjsSsrBuild = ssr && config.ssr.format === 'cjs'
+
       const format = output.format || (cjsSsrBuild ? 'cjs' : 'es')
       const jsExt =
-        ssrWorkerBuild || libOptions
+        ssrNodeBuild || libOptions
           ? resolveOutputJsExtension(format, getPkgJson(config.root)?.type)
           : 'js'
       return {

diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js
@@ -85,14 +85,15 @@ export default defineConfig(({ command, ssrBuild }) => ({
           }
         },
         transform(code, id) {
+          const cleanId = cleanUrl(id)
           if (
             config.build.ssr &&
-            cleanUrl(id).endsWith('.js') &&
+            (cleanId.endsWith('.js') || cleanId.endsWith('.vue')) &&
             !code.includes('__ssr_vue_processAssetPath')
           ) {
             return {
               code:
-                `import { __ssr_vue_processAssetPath } from '${virtualId}';` +
+                `import { __ssr_vue_processAssetPath } from '${virtualId}';__ssr_vue_processAssetPath;` +
                 code,
               sourcemap: null // no sourcemap support to speed up CI
             }

diff --git a/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts b/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts
@@ -1,5 +1,5 @@
 import { port } from './serve'
-import { page } from '~utils'
+import { findAssetFile, isBuild, page } from '~utils'
 
 const url = `http://localhost:${port}`
 
@@ -9,3 +9,8 @@ test('/', async () => {
   expect(await page.textContent('.linked')).toMatch('dep from upper directory')
   expect(await page.textContent('.external')).toMatch('object')
 })
+
+test.runIf(isBuild)('inlineDynamicImports', () => {
+  const dynamicJsContent = findAssetFile(/dynamic\.\w+\.js/, 'worker')
+  expect(dynamicJsContent).toBe('')
+})
diff --git a/playground/ssr-webworker/src/dynamic.js b/playground/ssr-webworker/src/dynamic.js
@@ -0,0 +1 @@
+export const foo = 'foo'
diff --git a/playground/ssr-webworker/src/entry-worker.jsx b/playground/ssr-webworker/src/entry-worker.jsx
@@ -1,6 +1,10 @@
 import { msg as linkedMsg } from 'resolve-linked'
 import React from 'react'
 
+import('./dynamic').then(({ foo }) => {
+  console.log(foo)
+})
+
 addEventListener('fetch', function (event) {
   return event.respondWith(
     new Response(

diff --git a/playground/test-utils.ts b/playground/test-utils.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
 // test utils used in e2e tests for playgrounds.
 // `import { getColor } from '~utils'`
 
@@ -8,7 +7,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import colors from 'css-color-names'
-import type { ElementHandle, ConsoleMessage } from 'playwright-chromium'
+import type { ConsoleMessage, ElementHandle } from 'playwright-chromium'
 import type { Manifest } from 'vite'
 import { normalizePath } from 'vite'
 import { fromComment } from 'convert-source-map'
@@ -128,7 +127,15 @@ export function findAssetFile(
   assets = 'assets'
 ): string {
   const assetsDir = path.join(testDir, 'dist', base, assets)
-  const files = fs.readdirSync(assetsDir)
+  let files: string[]
+  try {
+    files = fs.readdirSync(assetsDir)
+  } catch (e) {
+    if (e.code === 'ENOENT') {
+      return ''
+    }
+    throw e
+  }
   const file = files.find((file) => {
     return file.match(match)
   })