fix: broken worker urls in 3rd party modules (fix #10838)

packages/vite/src/node/optimizer/index.ts

@@ -27,10 +27,12 @@ import {
   transformWithEsbuild,
 } from '../plugins/esbuild'
 import { ESBUILD_MODULES_TARGET, METADATA_FILENAME } from '../constants'
-import { isWindows } from '../../shared/utils'
+import { cleanUrl, isWindows } from '../../shared/utils'
+import { type InternalResolveOptions, tryFsResolve } from '../plugins/resolve'
 import { esbuildCjsExternalPlugin, esbuildDepPlugin } from './esbuildDepPlugin'
 import { scanImports } from './scan'
 import { createOptimizeDepsIncludeResolver, expandGlobIds } from './resolve'
+import { getDepsOptimizer } from './optimizer'
 export {
   initDepsOptimizer,
   initDevSsrDepsOptimizer,
@@ -1350,3 +1352,25 @@ const safeRename = promisify(function gracefulRename(
     if (cb) cb(er)
   })
 })
+
+export function tryOptimizedDepResolve(
+  config: ResolvedConfig,
+  ssr: boolean,
+  url: string,
+  depId: string,
+  fsResolveOptions: InternalResolveOptions,
+): string | undefined {
+  const depsOptimizer = getDepsOptimizer(config, ssr)
+
+  if (depsOptimizer?.isOptimizedDepFile(depId)) {
+    const depFile = cleanUrl(depId)
+    const info = optimizedDepInfoFromFile(depsOptimizer.metadata, depFile)
+    const depSrc = info?.src
+    if (depSrc) {
+      const resolvedFile = path.resolve(path.dirname(depSrc), url)
+      return tryFsResolve(resolvedFile, fsResolveOptions)
+    }
+  }
+
+  return undefined
+}

packages/vite/src/node/plugins/assetImportMetaUrl.ts

@@ -7,6 +7,7 @@ import type { ResolveFn } from '../'
 import { injectQuery, isParentDirectory, transformStableResult } from '../utils'
 import { CLIENT_ENTRY } from '../constants'
 import { slash } from '../../shared/utils'
+import { tryOptimizedDepResolve } from '../optimizer'
 import { fileToUrl } from './asset'
 import { preloadHelperId } from './importAnalysisBuild'
 import type { InternalResolveOptions } from './resolve'
@@ -104,7 +105,16 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           let file: string | undefined
           if (url[0] === '.') {
             file = slash(path.resolve(path.dirname(id), url))
-            file = tryFsResolve(file, fsResolveOptions) ?? file
+            file =
+              tryFsResolve(file, fsResolveOptions) ??
+              tryOptimizedDepResolve(
+                config,
+                options?.ssr === true,
+                url,
+                id,
+                fsResolveOptions,
+              ) ??
+              file
           } else {
             assetResolver ??= config.createResolver({
               extensions: [],

packages/vite/src/node/plugins/workerImportMetaUrl.ts

@@ -7,6 +7,7 @@ import type { Plugin } from '../plugin'
 import { evalValue, injectQuery, transformStableResult } from '../utils'
 import type { ResolveFn } from '..'
 import { cleanUrl, slash } from '../../shared/utils'
+import { tryOptimizedDepResolve } from '../optimizer'
 import type { WorkerType } from './worker'
 import { WORKER_FILE_ID, workerFileToUrl } from './worker'
 import { fileToUrl } from './asset'
@@ -148,10 +149,20 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s ||= new MagicString(code)
           const workerType = getWorkerType(code, cleanString, endIndex)
           const url = rawUrl.slice(1, -1)
+
           let file: string | undefined
           if (url[0] === '.') {
             file = path.resolve(path.dirname(id), url)
-            file = tryFsResolve(file, fsResolveOptions) ?? file
+            file =
+              tryFsResolve(file, fsResolveOptions) ??
+              tryOptimizedDepResolve(
+                config,
+                options?.ssr === true,
+                url,
+                id,
+                fsResolveOptions,
+              ) ??
+              file
           } else {
             workerResolver ??= config.createResolver({
               extensions: [],

playground/assets/__tests__/assets.spec.ts

@@ -570,3 +570,14 @@ test.runIf(isBuild)('assets inside <noscript> is rewrote', async () => {
     /<img class="noscript" src="\/foo\/bar\/assets\/asset-[-\w]+\.png" \/>/,
   )
 })
+
+test('import.meta.url in dependency', async () => {
+  const match = isBuild
+    ? /\/foo\/bar\/assets\/asset-[-\w]{8}\.png/
+    : /node_modules\/@vitejs\/test-dep-with-asset\/asset.png/
+
+  expect(await page.textContent('.import-meta-url-dependency')).toMatch(match)
+  expect(
+    await page.getAttribute('.import-meta-url-img-dependency', 'src'),
+  ).toMatch(match)
+})

playground/assets/dep-with-asset/dir/path.js

@@ -0,0 +1 @@
+export const imageUrl = new URL('../asset.png', import.meta.url).href

playground/assets/dep-with-asset/index.js

@@ -0,0 +1 @@
+export { imageUrl } from './dir/path.js'

playground/assets/dep-with-asset/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/test-dep-with-asset",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js"
+}

playground/assets/index.html

@@ -578,3 +578,12 @@ <h3>assets in noscript</h3>
     document.querySelector(el).textContent = text
   }
 </script>
+
+<h2>import.meta.url in dependency</h2>
+<img class="import-meta-url-img-dependency" />
+<code class="import-meta-url-dependency"></code>
+<script type="module">
+  import { imageUrl } from '@vitejs/test-dep-with-asset'
+  text('.import-meta-url-dependency', imageUrl)
+  document.querySelector('.import-meta-url-img-dependency').src = imageUrl
+</script>

playground/assets/package.json

@@ -17,5 +17,8 @@
     "dev:url-base": "vite --config ./vite.config-url-base.js dev",
     "build:url-base": "vite --config ./vite.config-url-base.js build",
     "preview:url-base": "vite --config ./vite.config-url-base.js preview"
+  },
+  "dependencies": {
+    "@vitejs/test-dep-with-asset": "file:./dep-with-asset"
   }
 }

playground/worker/__tests__/es/worker-es.spec.ts

@@ -111,7 +111,7 @@ describe.runIf(isBuild)('build', () => {
   test('inlined code generation', async () => {
     const assetsDir = path.resolve(testDir, 'dist/es/assets')
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(34)
+    expect(files.length).toBe(35)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))
@@ -240,3 +240,11 @@ test('self reference url worker', async () => {
     'pong: main\npong: nested\n',
   )
 })
+
+test('dep with worker', async () => {
+  await untilUpdated(
+    () => page.textContent('.dep-with-worker'),
+    'entry: main\nentry: worker\npong: worker',
+    true,
+  )
+})

playground/worker/__tests__/iife/worker-iife.spec.ts

@@ -75,7 +75,7 @@ describe.runIf(isBuild)('build', () => {
   test('inlined code generation', async () => {
     const assetsDir = path.resolve(testDir, 'dist/iife/assets')
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(22)
+    expect(files.length).toBe(23)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('worker_entry-my-worker'))
@@ -192,3 +192,9 @@ function decodeSourceMapUrl(content: string) {
     ).toString(),
   )
 }
+
+test('dep with worker', async () => {
+  expectWithRetry(() => page.textContent('.dep-with-worker')).toBe(
+    'ping: main\npong: worker',
+  )
+})

playground/worker/__tests__/relative-base/worker-relative-base.spec.ts

@@ -173,3 +173,9 @@ test('self reference url worker', async () => {
     'pong: main\npong: nested\n',
   )
 })
+
+test('dep with worker', async () => {
+  expectWithRetry(() => page.textContent('.dep-with-worker')).toBe(
+    'ping: main\npong: worker',
+  )
+})

playground/worker/__tests__/sourcemap-hidden/worker-sourcemap-hidden.spec.ts

@@ -10,7 +10,7 @@ describe.runIf(isBuild)('build', () => {
 
     const files = fs.readdirSync(assetsDir)
     // should have 2 worker chunk
-    expect(files.length).toBe(44)
+    expect(files.length).toBe(46)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const indexSourcemap = getSourceMapUrl(content)

playground/worker/__tests__/sourcemap-inline/worker-sourcemap-inline.spec.ts

@@ -10,7 +10,7 @@ describe.runIf(isBuild)('build', () => {
 
     const files = fs.readdirSync(assetsDir)
     // should have 2 worker chunk
-    expect(files.length).toBe(22)
+    expect(files.length).toBe(23)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const indexSourcemap = getSourceMapUrl(content)

playground/worker/__tests__/sourcemap/worker-sourcemap.spec.ts

@@ -9,7 +9,7 @@ describe.runIf(isBuild)('build', () => {
     const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap/assets')
     const files = fs.readdirSync(assetsDir)
     // should have 2 worker chunk
-    expect(files.length).toBe(44)
+    expect(files.length).toBe(46)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const indexSourcemap = getSourceMapUrl(content)

playground/worker/dep-with-worker/dep-worker.js

@@ -0,0 +1,7 @@
+import { sharedBetweenWorkerAndMain } from './shared'
+
+self.onmessage = (e) => {
+  self.postMessage(e.data)
+}
+
+sharedBetweenWorkerAndMain('', 'entry: worker')

playground/worker/dep-with-worker/index.js

@@ -0,0 +1,17 @@
+import { sharedBetweenWorkerAndMain } from './shared.js'
+
+export function startWorker(el) {
+  sharedBetweenWorkerAndMain(el, 'entry: main')
+
+  const worker = new Worker(
+    new URL('./dep-worker.js?worker', import.meta.url),
+    {
+      type: 'module',
+    },
+  )
+  worker.addEventListener('message', (e) => {
+    console.log('message', e)
+    sharedBetweenWorkerAndMain(el, e.data.msg)
+  })
+  worker.postMessage({ msg: 'pong: worker' })
+}

playground/worker/dep-with-worker/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/test-dep-with-worker",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js"
+}

playground/worker/dep-with-worker/shared.js

@@ -0,0 +1,9 @@
+export function sharedBetweenWorkerAndMain(el, text) {
+  if ('WorkerGlobalScope' in globalThis) {
+    self.postMessage({ msg: text })
+  } else if (document.querySelector(el).textContent.length > 0) {
+    document.querySelector(el).textContent += '\n' + text
+  } else {
+    document.querySelector(el).textContent = text
+  }
+}

playground/worker/index.html

@@ -215,6 +215,12 @@ <h2 class="format-es"></h2>
 </p>
 <code class="module-and-worker-worker"></code>
 
+<p>
+  worker within dependency
+  <span class="classname">.dep-with-worker</span>
+</p>
+<code class="dep-with-worker"></code>
+
 <style>
   p {
     background: rgba(0, 0, 0, 0.1);

playground/worker/package.json

@@ -28,6 +28,7 @@
     "debug": "node --inspect-brk ../../packages/vite/bin/vite"
   },
   "dependencies": {
-    "@vitejs/test-dep-to-optimize": "file:./dep-to-optimize"
+    "@vitejs/test-dep-to-optimize": "file:./dep-to-optimize",
+    "@vitejs/test-dep-with-worker": "file:./dep-with-worker"
   }
 }

playground/worker/worker/main-module.js

@@ -1,3 +1,4 @@
+import { startWorker as startDepWorker } from '@vitejs/test-dep-with-worker'
 import myWorker from '../my-worker.ts?worker'
 import InlineWorker from '../my-worker.ts?worker&inline'
 import InlineSharedWorker from '../my-inline-shared-worker?sharedworker&inline'
@@ -174,3 +175,5 @@ selfReferenceUrlWorker.addEventListener('message', (e) => {
   document.querySelector('.self-reference-url-worker').textContent +=
     `${e.data}\n`
 })
+
+startDepWorker('.dep-with-worker')