fix: import with query with imports field (#16085)

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

@@ -480,9 +480,12 @@ function resolveSubpathImports(
   const pkgData = findNearestPackageData(basedir, options.packageCache)
   if (!pkgData) return
 
+  let { file: idWithoutPostfix, postfix } = splitFileAndPostfix(id.slice(1))
+  idWithoutPostfix = '#' + idWithoutPostfix
+
   let importsPath = resolveExportsOrImports(
     pkgData.data,
-    id,
+    idWithoutPostfix,
     options,
     targetWeb,
     'imports',
@@ -496,7 +499,7 @@ function resolveSubpathImports(
     }
   }
 
-  return importsPath
+  return importsPath + postfix
 }
 
 function ensureVersionQuery(

playground/resolve/__tests__/resolve.spec.ts

@@ -209,6 +209,13 @@ test('Resolving from other package with imports field', async () => {
   expect(await page.textContent('.imports-pkg-slash')).toMatch('[success]')
 })
 
+test('Resolving with query with imports field', async () => {
+  // since it is imported with `?url` it should return a URL
+  expect(await page.textContent('.imports-query')).toMatch(
+    isBuild ? /base64/ : '/imports-path/query.json',
+  )
+})
+
 test('Resolve doesnt interrupt page request with trailing query and .css', async () => {
   await page.goto(viteTestUrl + '/?test.css')
   expect(await page.locator('vite-error-overlay').count()).toBe(0)

playground/resolve/imports-path/query.json

@@ -0,0 +1,3 @@
+{
+  "foo": "json"
+}

playground/resolve/index.html

@@ -61,6 +61,9 @@ <h2>Resolving slash with imports filed</h2>
 <h2>Resolving from other package with imports field</h2>
 <p class="imports-pkg-slash">fail</p>
 
+<h2>Resolving with query with imports field</h2>
+<p class="imports-query">fail</p>
+
 <h2>Resolve /index.*</h2>
 <p class="index">fail</p>
 
@@ -254,6 +257,9 @@ <h2>resolve non normalized absolute path</h2>
   import { msg as importsPkgSlash } from '#other-pkg-slash/index.js'
   text('.imports-pkg-slash', importsPkgSlash)
 
+  import importsQuery from '#query?url'
+  text('.imports-query', importsQuery)
+
   // implicit index resolving
   import { foo } from './util'
   text('.index', foo())

playground/resolve/package.json

@@ -15,7 +15,8 @@
     "#nested/path.js": "./imports-path/nested-path.js",
     "#star/*": "./imports-path/star/*",
     "#slash/": "./imports-path/slash/",
-    "#other-pkg-slash/": "@vitejs/test-resolve-imports-pkg/nest/"
+    "#other-pkg-slash/": "@vitejs/test-resolve-imports-pkg/nest/",
+    "#query": "./imports-path/query.json"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",