fix: import meta urls for assets in 3rd party dependencies

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,7 +7,7 @@ import type { Plugin } from '../plugin'
 import { evalValue, injectQuery, transformStableResult } from '../utils'
 import type { ResolveFn } from '..'
 import { cleanUrl, slash } from '../../shared/utils'
-import { getDepsOptimizer, optimizedDepInfoFromFile } from '../optimizer'
+import { tryOptimizedDepResolve } from '../optimizer'
 import type { WorkerType } from './worker'
 import { WORKER_FILE_ID, workerFileToUrl } from './worker'
 import { fileToUrl } from './asset'
@@ -115,22 +115,6 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     asSrc: true,
   }
 
-  function tryOptimizedDepResolve(ssr: boolean, url: string, depId: string) {
-    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
-  }
-
   return {
     name: 'vite:worker-import-meta-url',
 
@@ -171,7 +155,13 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             file = path.resolve(path.dirname(id), url)
             file =
               tryFsResolve(file, fsResolveOptions) ??
-              tryOptimizedDepResolve(options?.ssr === true, url, id) ??
+              tryOptimizedDepResolve(
+                config,
+                options?.ssr === true,
+                url,
+                id,
+                fsResolveOptions,
+              ) ??
               file
           } else {
             workerResolver ??= config.createResolver({

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/index.js

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

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"
   }
 }