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

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

Author: hershelh

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

@@ -1208,8 +1208,11 @@ function tryResolveBrowserMapping(
     const mapId = isFilePath ? './' + slash(path.relative(pkg.dir, id)) : id
     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, true)?.id
+          : tryFsResolve(path.join(pkg.dir, browserMappedPath), 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

@@ -233,6 +233,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,
@@ -244,7 +245,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 (