fix(optimizer): map relative new URL paths to correct relative file location (vitejs#21434)

Author: guyco3

packages/vite/src/node/__tests__/optimizer/rolldownDepPlugin.spec.ts

@@ -0,0 +1,132 @@
+import { describe, expect, test } from 'vitest'
+import { rolldownDepPlugin } from '../../optimizer/rolldownDepPlugin'
+import { normalizePath } from '../../utils'
+
+async function createRolldownDepPluginTransform(cacheDir: string) {
+  const baseConfig = {
+    cacheDir: normalizePath(cacheDir),
+    optimizeDeps: { extensions: [] },
+    server: { fs: { allow: [] } },
+    resolve: { builtins: [] },
+    createResolver: () => ({}),
+  }
+
+  const mockEnvironment = {
+    config: baseConfig,
+    getTopLevelConfig: () => baseConfig,
+  } as any
+
+  const plugins = rolldownDepPlugin(mockEnvironment, {}, [])
+  const plugin = plugins.find(
+    (p: any) => p.name === 'vite:dep-pre-bundle',
+  ) as any
+
+  if (!plugin || !plugin.transform) {
+    throw new Error('Could not find vite:dep-pre-bundle plugin')
+  }
+
+  const handler = plugin.transform.handler
+
+  return async (code: string, id: string) => {
+    const result = await handler.call({}, code, normalizePath(id))
+    return result?.code || result
+  }
+}
+
+describe('rolldownDepPlugin transform', async () => {
+  const transform = await createRolldownDepPluginTransform('/root/.vite')
+
+  test('rewrite various relative asset formats', async () => {
+    const code = `
+      const img = new URL('./logo.png', import.meta.url).href
+      const icon = new URL('./icons/search.svg', import.meta.url)
+      const worker = new URL('./worker.js', import.meta.url)
+      const wasm = new URL('./module.wasm', import.meta.url)
+    `
+    expect(await transform(code, '/root/node_modules/my-lib/dist/index.js'))
+      .toMatchInlineSnapshot(`
+      "
+            const img = new URL('' + "../../node_modules/my-lib/dist/logo.png", import.meta.url).href
+            const icon = new URL('' + "../../node_modules/my-lib/dist/icons/search.svg", import.meta.url)
+            const worker = new URL('' + "../../node_modules/my-lib/dist/worker.js", import.meta.url)
+            const wasm = new URL('' + "../../node_modules/my-lib/dist/module.wasm", import.meta.url)
+          "
+    `)
+  })
+
+  test('respects /* @vite-ignore */', async () => {
+    expect(
+      await transform(
+        "new URL(/* @vite-ignore */ './worker.js', import.meta.url)",
+        '/root/node_modules/my-lib/index.js',
+      ),
+    ).toBeUndefined()
+  })
+
+  test('skips non-relative URLs (absolute, data, protocols)', async () => {
+    const code = `
+      new URL('/absolute/path.png', import.meta.url)
+      new URL('https://example.com/worker.js', import.meta.url)
+      new URL('data:text/javascript;base64,Y29uc29sZS5sb2coMSk=', import.meta.url)
+    `
+    expect(
+      await transform(code, '/root/node_modules/my-lib/index.js'),
+    ).toBeUndefined()
+  })
+
+  test('skips dynamic template strings', async () => {
+    expect(
+      await transform(
+        'new URL(`./${name}.js`, import.meta.url)',
+        '/root/node_modules/my-lib/index.js',
+      ),
+    ).toBeUndefined()
+  })
+
+  test('handles backticks for static relative strings', async () => {
+    expect(
+      await transform(
+        'new URL(`./static.js`, import.meta.url)',
+        '/root/node_modules/my-lib/index.js',
+      ),
+    ).toMatchInlineSnapshot(
+      `"new URL('' + "../../node_modules/my-lib/static.js", import.meta.url)"`,
+    )
+  })
+
+  test('handles assets with query parameters and hashes', async () => {
+    const code = `
+      const url1 = new URL('./style.css?raw', import.meta.url)
+      const url2 = new URL('./data.json#config', import.meta.url)
+    `
+    expect(await transform(code, '/root/node_modules/my-lib/index.js'))
+      .toMatchInlineSnapshot(`
+      "
+            const url1 = new URL('' + "../../node_modules/my-lib/style.css?raw", import.meta.url)
+            const url2 = new URL('' + "../../node_modules/my-lib/data.json#config", import.meta.url)
+          "
+    `)
+  })
+
+  test('handles deeply nested relative paths', async () => {
+    expect(
+      await transform(
+        "new URL('../../../assets/file.js', import.meta.url)",
+        '/root/node_modules/my-lib/dist/deep/folder/index.js',
+      ),
+    ).toMatchInlineSnapshot(
+      `"new URL('' + "../../node_modules/my-lib/assets/file.js", import.meta.url)"`,
+    )
+  })
+
+  test('rewrite relative URLs even if id is not in node_modules', async () => {
+    expect(
+      await transform(
+        "new URL('./asset.js', import.meta.url)",
+        '/root/src/local-dep.js',
+      ),
+    ).toMatchInlineSnapshot(
+      `"new URL('' + "../../src/asset.js", import.meta.url)"`,
+    )
+  })
+})

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

@@ -1,22 +1,27 @@
 import path from 'node:path'
 import type { ImportKind, Plugin, RolldownPlugin } from 'rolldown'
 import { prefixRegex } from '@rolldown/pluginutils'
+import MagicString from 'magic-string'
+import { stripLiteral } from 'strip-literal'
 import { JS_TYPES_RE, KNOWN_ASSET_TYPES } from '../constants'
 import type { PackageCache } from '../packages'
 import {
   escapeRegex,
   flattenId,
   isBuiltin,
   isCSSRequest,
+  isDataUrl,
   isExternalUrl,
   isNodeBuiltin,
   moduleListContains,
+  normalizePath,
 } from '../utils'
 import { browserExternalId, optionalPeerDepId } from '../plugins/resolve'
 import { isModuleCSSRequest } from '../plugins/css'
 import type { Environment } from '../environment'
 import { createBackCompatIdResolver } from '../idResolver'
 import { isWindows } from '../../shared/utils'
+import { hasViteIgnoreRE } from '../plugins/importAnalysis'
 
 const externalWithConversionNamespace =
   'vite:dep-pre-bundle:external-conversion'
@@ -139,6 +144,8 @@ export function rolldownDepPlugin(
     }
   }
 
+  const bundleOutputDir = path.join(environment.config.cacheDir, 'deps')
+
   return [
     {
       name: 'vite:dep-pre-bundle-assets',
@@ -298,6 +305,59 @@ export function rolldownDepPlugin(
           }
         },
       },
+      transform: {
+        filter: {
+          code: /new\s+URL.+import\.meta\.url/s,
+        },
+        async handler(code, id) {
+          let s: MagicString | undefined
+          const assetImportMetaUrlRE =
+            /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*(?:,\s*)?\)/dg
+          const cleanString = stripLiteral(code)
+
+          let match: RegExpExecArray | null
+          while ((match = assetImportMetaUrlRE.exec(cleanString))) {
+            const [[startIndex, endIndex], [urlStart, urlEnd]] = match.indices!
+            if (hasViteIgnoreRE.test(code.slice(startIndex, urlStart))) continue
+
+            const rawUrl = code.slice(urlStart, urlEnd)
+
+            if (rawUrl[0] === '`' && rawUrl.includes('${')) {
+              // We skip dynamic template strings in the optimizer for now as they
+              // require complex glob transformation that is handled by the main asset plugin.
+              continue
+            }
+
+            const url = rawUrl.slice(1, -1)
+            if (isDataUrl(url) || isExternalUrl(url) || url.startsWith('/')) {
+              continue
+            }
+
+            if (!s) s = new MagicString(code)
+
+            // we resolve the relative path from the original library file (id) and
+            // then rewrite it relative to the bundle (deps) directory.
+            const absolutePath = path.resolve(path.dirname(id), url)
+            const relativePath = path.relative(bundleOutputDir, absolutePath)
+            const normalizedRelativePath = normalizePath(relativePath)
+            s.update(
+              startIndex,
+              endIndex,
+              // NOTE: add `'' +` to opt-out rolldown's transform: https://github.com/rolldown/rolldown/issues/2745
+              `new URL('' + ${JSON.stringify(
+                normalizedRelativePath,
+              )}, import.meta.url)`,
+            )
+          }
+
+          if (s) {
+            return {
+              code: s.toString(),
+              map: s.generateMap({ hires: 'boundary' }),
+            }
+          }
+        },
+      },
     },
   ]
 }

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -370,3 +370,21 @@ test.runIf(isServe)(
     expect(scanErrors).toHaveLength(0)
   },
 )
+
+test('should fix relative worker paths in optimized dependencies', async () => {
+  await expect
+    .poll(() => page.textContent('.worker-lib'))
+    .toBe('worker-success')
+  await expect
+    .poll(() => page.textContent('.worker-nested'))
+    .toBe('worker-success')
+
+  const assetMatcher = isBuild
+    ? /assets\/logo-[-\w]+\.png/
+    : /\/node_modules\/@vitejs\/test-dep-with-assets\/logo\.png/
+  await expect.poll(() => page.textContent('.asset-url')).toMatch(assetMatcher)
+
+  const url = await page.textContent('.asset-url')
+  const res = await page.request.get(url)
+  expect(res.status()).toBe(200)
+})

playground/optimize-deps/dep-with-assets/index.js

@@ -0,0 +1,12 @@
+export function urlImportWorker() {
+  const worker = new Worker(new URL('./worker.js', import.meta.url), {
+    type: 'module',
+  })
+  return new Promise((res) => {
+    worker.onmessage = (e) => res(e.data)
+  })
+}
+
+export function getAssetUrl() {
+  return new URL('./logo.png', import.meta.url).href
+}

playground/optimize-deps/dep-with-assets/logo.png

@@ -0,0 +1,9 @@
+export function urlImportWorker() {
+  // Testing the ../ path traversal
+  const worker = new Worker(new URL('../worker.js', import.meta.url), {
+    type: 'module',
+  })
+  return new Promise((res) => {
+    worker.onmessage = (e) => res(e.data)
+  })
+}

playground/optimize-deps/dep-with-assets/nested/index.js

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-dep-with-assets",
+  "version": "1.0.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./nested": "./nested/index.js"
+  }
+}

playground/optimize-deps/dep-with-assets/package.json

@@ -0,0 +1 @@
+self.postMessage('worker-success')

playground/optimize-deps/dep-with-assets/worker.js

@@ -386,3 +386,25 @@ <h2>Virtual module with .vue extension</h2>
     `${VirtualComponent.name === 'VirtualComponent' ? 'ok' : 'ng'}`,
   )
 </script>
+
+<h2>Relative asset URLs in optimized dependencies</h2>
+<div>
+  Message from lib worker:
+  <span class="worker-lib"></span>
+</div>
+<div>
+  Message from nested worker:
+  <span class="worker-nested"></span>
+</div>
+<h2>Non-worker asset from optimized dep</h2>
+<div>
+  Asset URL from lib:
+  <span class="asset-url"></span>
+</div>
+<script type="module">
+  import * as lib from '@vitejs/test-dep-with-assets'
+  import * as nested from '@vitejs/test-dep-with-assets/nested'
+  lib.urlImportWorker().then((m) => text('.worker-lib', m))
+  nested.urlImportWorker().then((m) => text('.worker-nested', m))
+  text('.asset-url', lib.getAssetUrl())
+</script>

playground/optimize-deps/index.html

@@ -42,6 +42,7 @@
     "@vitejs/test-dep-non-optimized": "file:./dep-non-optimized",
     "@vitejs/test-added-in-entries": "file:./added-in-entries",
     "@vitejs/test-dep-cjs-external-package-omit-js-suffix": "file:./dep-cjs-external-package-omit-js-suffix",
+    "@vitejs/test-dep-with-assets": "file:./dep-with-assets",
     "lodash-es": "^4.17.23",
     "@vitejs/test-nested-exclude": "file:./nested-exclude",
     "phoenix": "^1.8.3",