fix: import with query with exports/browser field

packages/playground/resolve/__tests__/resolve.spec.ts

@@ -17,7 +17,16 @@ test('deep import with exports field', async () => {
 })
 
 test('deep import with query with exports field', async () => {
-  expect(await page.textContent('.exports-deep-query')).not.toMatch('fail')
+  // since it is imported with `?url` it should return a url
+  expect(await page.textContent('.exports-deep-query')).toMatch(
+    isBuild ? /base64/ : '/exports-path/deep.json'
+  )
+})
+
+test('deep import with exports field including "?"', async () => {
+  expect(await page.textContent('.exports-deep-question-mark')).toMatch(
+    '[success]'
+  )
 })
 
 test('deep import with exports field + exposed dir', async () => {

packages/playground/resolve/browser-field/package.json

@@ -12,6 +12,7 @@
     "./no-ext-index": "./out/esm.browser.js",
     "./not-browser.js": false,
     "./multiple.dot.path.js": false,
-    "jsdom": false
+    "jsdom": false,
+    "./question.js?query": "./out/esm.browser.js"
   }
 }

packages/playground/resolve/exports-path/deep2.js

@@ -0,0 +1 @@
+export const msg = '[success] deep resolve from exports including postfix'

packages/playground/resolve/exports-path/package.json

@@ -9,6 +9,7 @@
     },
     "./deep.js": "./deep.js",
     "./deep.json": "./deep.json",
+    "./deep.js?url": "./deep2.js",
     "./dir/": "./dir/",
     "./dir-mapped/*": {
       "import": "./dir/*",

packages/playground/resolve/index.html

@@ -15,6 +15,9 @@ <h2>Deep import with exports field</h2>
 <h2>Deep import with query with exports field</h2>
 <p class="exports-deep-query">fail</p>
 
+<h2>Deep import with exports field including "?"</h2>
+<p class="exports-deep-question-mark">fail</p>
+
 <h2>Deep import with exports field + exposed directory</h2>
 <p class="exports-deep-exposed-dir">fail</p>
 
@@ -107,6 +110,10 @@ <h2>resolve package that contains # in path</h2>
   import deepPath from 'resolve-exports-path/deep.json?url'
   text('.exports-deep-query', deepPath)
 
+  // deep import w/ exports including "?"
+  import { msg as deepMsg2 } from 'resolve-exports-path/deep.js?url'
+  text('.exports-deep-question-mark', deepMsg2)
+
   // deep import w/ exposed dir
   import { msg as exposedDirMsg } from 'resolve-exports-path/dir/dir'
   text('.exports-deep-exposed-dir', exposedDirMsg)
@@ -151,10 +158,12 @@ <h2>resolve package that contains # in path</h2>
   import e from 'resolve-browser-field/ext-index/index.js'
   import f from 'resolve-browser-field/ext-index'
   import g from 'resolve-browser-field/no-ext-index/index.js' // no substitution
+  import h from 'resolve-browser-field/question.js?query'
+  import i from 'resolve-browser-field/no-ext?query'
 
   import { ra, rb, rc, rd, re, rf, rg } from 'resolve-browser-field/relative'
 
-  const success = [main, a, c, d, e, f, ra, rc, rd, re, rf]
+  const success = [main, a, c, d, e, f, h, i, ra, rc, rd, re, rf]
   const noSuccess = [b, g, rb, rg]
 
   if (

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

@@ -289,23 +289,28 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
   }
 }
 
-function tryFsResolve(
-  fsPath: string,
-  options: InternalResolveOptions,
-  tryIndex = true,
-  targetWeb = true
-): string | undefined {
-  let file = fsPath
+function splitFileAndPostfix(path: string) {
+  let file = path
   let postfix = ''
 
-  let postfixIndex = fsPath.indexOf('?')
+  let postfixIndex = path.indexOf('?')
   if (postfixIndex < 0) {
-    postfixIndex = fsPath.indexOf('#')
+    postfixIndex = path.indexOf('#')
   }
   if (postfixIndex > 0) {
-    file = fsPath.slice(0, postfixIndex)
-    postfix = fsPath.slice(postfixIndex)
+    file = path.slice(0, postfixIndex)
+    postfix = path.slice(postfixIndex)
   }
+  return { file, postfix }
+}
+
+function tryFsResolve(
+  fsPath: string,
+  options: InternalResolveOptions,
+  tryIndex = true,
+  targetWeb = true
+): string | undefined {
+  const { file, postfix } = splitFileAndPostfix(fsPath)
 
   let res: string | undefined
 
@@ -772,7 +777,7 @@ function packageEntryFailure(id: string, details?: string) {
 
 function resolveExports(
   pkg: PackageData['data'],
-  key: string,
+  keyWithQuery: string,
   options: InternalResolveOptions,
   targetWeb: boolean
 ) {
@@ -783,11 +788,30 @@ function resolveExports(
   if (options.conditions) {
     conditions.push(...options.conditions)
   }
-  return _resolveExports(pkg, key, {
-    browser: targetWeb,
-    require: options.isRequire,
-    conditions
-  })
+
+  try {
+    const resolved = _resolveExports(pkg, keyWithQuery, {
+      browser: targetWeb,
+      require: options.isRequire,
+      conditions
+    })
+    return resolved
+  } catch (err) {
+    // not found
+
+    // try without postfix for `import 'something/path.js?query'` (see #7098)
+    const { file, postfix } = splitFileAndPostfix(keyWithQuery)
+    if (!postfix) {
+      throw err
+    }
+
+    const resolvedWithoutPostfix = _resolveExports(pkg, file, {
+      browser: targetWeb,
+      require: options.isRequire,
+      conditions
+    })
+    return resolvedWithoutPostfix + postfix
+  }
 }
 
 function resolveDeepImport(
@@ -813,12 +837,7 @@ function resolveDeepImport(
   // map relative based on exports data
   if (exportsField) {
     if (isObject(exportsField) && !Array.isArray(exportsField)) {
-      relativeId = resolveExports(
-        data,
-        cleanUrl(relativeId),
-        options,
-        targetWeb
-      )
+      relativeId = resolveExports(data, relativeId, options, targetWeb)
     } else {
       // not exposed
       relativeId = undefined
@@ -898,12 +917,37 @@ function mapWithBrowserField(
 ): string | false | undefined {
   const normalizedPath = path.posix.normalize(relativePathInPkgDir)
 
+  const result = _mapWithBrowserField(normalizedPath, map)
+  if (result !== undefined) {
+    return result
+  }
+
+  // try without postfix for `import 'something/path.js?query'` (see #7098)
+  const { file: normalizedPathWithoutPostfix, postfix } =
+    splitFileAndPostfix(normalizedPath)
+  if (!postfix) {
+    return undefined
+  }
+  const resultWithoutPostfix = _mapWithBrowserField(
+    normalizedPathWithoutPostfix,
+    map
+  )
+  if (typeof resultWithoutPostfix === 'string') {
+    return resultWithoutPostfix + postfix
+  }
+  return resultWithoutPostfix
+}
+
+function _mapWithBrowserField(
+  normalizedRelativePath: string,
+  map: Record<string, string | false>
+): string | false | undefined {
   for (const key in map) {
     const normalizedKey = path.posix.normalize(key)
     if (
-      normalizedPath === normalizedKey ||
-      equalWithoutSuffix(normalizedPath, normalizedKey, '.js') ||
-      equalWithoutSuffix(normalizedPath, normalizedKey, '/index.js')
+      normalizedRelativePath === normalizedKey ||
+      equalWithoutSuffix(normalizedRelativePath, normalizedKey, '.js') ||
+      equalWithoutSuffix(normalizedRelativePath, normalizedKey, '/index.js')
     ) {
       return map[key]
     }