fix: resolve browser mapping using bare imports (fix #11208)

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

@@ -247,7 +247,13 @@ export function resolvePlugin(resolveOptions: InternalResolveOptions): Plugin {
         if (
           targetWeb &&
           options.browserField &&
-          (res = tryResolveBrowserMapping(fsPath, importer, options, true))
+          (res = tryResolveBrowserMapping(
+            fsPath,
+            importer,
+            options,
+            targetWeb,
+            true,
+          ))
         ) {
           return res
         }
@@ -323,6 +329,7 @@ export function resolvePlugin(resolveOptions: InternalResolveOptions): Plugin {
             importer,
             options,
             false,
+            targetWeb,
             external,
           ))
         ) {
@@ -1165,6 +1172,7 @@ function tryResolveBrowserMapping(
   importer: string | undefined,
   options: InternalResolveOptions,
   isFilePath: boolean,
+  targetWeb: boolean,
   externalize?: boolean,
 ) {
   let res: string | undefined
@@ -1175,7 +1183,12 @@ function tryResolveBrowserMapping(
     const browserMappedPath = mapWithBrowserField(mapId, pkg.data.browser)
     if (browserMappedPath) {
       const fsPath = path.join(pkg.dir, browserMappedPath)
-      if ((res = tryFsResolve(fsPath, options))) {
+
+      if (
+        (res = bareImportRE.test(browserMappedPath)
+          ? tryNodeResolve(browserMappedPath, importer, options, targetWeb)?.id
+          : tryFsResolve(fsPath, options))
+      ) {
         isDebug &&
           debug(`[browser mapped] ${colors.cyan(id)} -> ${colors.dim(res)}`)
         idToPkgMap.set(res, pkg)

playground/resolve/browser-field-bare-import-fail/main.js

@@ -0,0 +1 @@
+export default '[fail]'

playground/resolve/browser-field-bare-import-fail/module.js

@@ -0,0 +1 @@
+export default '[fail]'

playground/resolve/browser-field-bare-import-fail/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@vitejs/test-resolve-browser-field-bare-import-fail",
+  "private": true,
+  "version": "1.0.0",
+  "main": "main.js",
+  "module": "module.js",
+  "type": "module"
+}

playground/resolve/browser-field-bare-import-success/main.js

@@ -0,0 +1 @@
+export default '[fail]'

playground/resolve/browser-field-bare-import-success/module.js

@@ -0,0 +1 @@
+export default '[success]'

playground/resolve/browser-field-bare-import-success/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@vitejs/test-resolve-browser-field-bare-import-success",
+  "private": true,
+  "version": "1.0.0",
+  "main": "main.js",
+  "module": "module.js",
+  "type": "module"
+}

playground/resolve/browser-field/bare-import.js

@@ -0,0 +1,2 @@
+import message from '@vitejs/test-resolve-browser-field-bare-import-fail'
+export default message

playground/resolve/browser-field/package.json

@@ -10,8 +10,14 @@
     "./ext.js": "./out/esm.browser.js",
     "./ext-index/index.js": "./out/esm.browser.js",
     "./no-ext-index": "./out/esm.browser.js",
+    "./bare-import": "./bare-import.js",
     "./not-browser.js": false,
     "./multiple.dot.path.js": false,
-    "jsdom": false
+    "jsdom": false,
+    "@vitejs/test-resolve-browser-field-bare-import-fail": "@vitejs/test-resolve-browser-field-bare-import-success"
+  },
+  "dependencies": {
+    "@vitejs/test-resolve-browser-field-bare-import-fail": "link:../browser-field-bare-import-fail",
+    "@vitejs/test-resolve-browser-field-bare-import-success": "link:../browser-field-bare-import-success"
   }
 }

playground/resolve/index.html

@@ -215,6 +215,7 @@ <h2>resolve package that contains # in path</h2>
   import f from '@vitejs/test-resolve-browser-field/ext-index'
   import g from '@vitejs/test-resolve-browser-field/no-ext-index/index.js' // no substitution
   import h from '@vitejs/test-resolve-browser-field/no-ext?query'
+  import i from '@vitejs/test-resolve-browser-field/bare-import'
 
   import {
     ra,
@@ -226,7 +227,7 @@ <h2>resolve package that contains # in path</h2>
     rg,
   } from '@vitejs/test-resolve-browser-field/relative'
 
-  const success = [main, a, c, d, e, f, h, 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 (