fix(resolve): improve browser filed substitutions (#2701), fix #2598

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

@@ -66,7 +66,7 @@ test('monorepo linked dep', async () => {
   expect(await page.textContent('.monorepo')).toMatch('[success]')
 })
 
-test('plugin resolved virutal file', async () => {
+test('plugin resolved virtual file', async () => {
   expect(await page.textContent('.virtual')).toMatch('[success]')
 })
 

packages/playground/resolve/browser-field/multiple.dot.path.js

@@ -0,0 +1,2 @@
+const fs = require('fs')
+console.log('this should not run in the browser')

packages/playground/resolve/browser-field/no-ext-index/index.js

@@ -0,0 +1,2 @@
+import jsdom from 'jsdom' // should be redireted to empty module
+export default ''

packages/playground/resolve/browser-field/no-ext.js

@@ -0,0 +1,2 @@
+import jsdom from 'jsdom' // should be redireted to empty module
+export default ''

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

@@ -5,7 +5,12 @@
   "main": "out/cjs.node.js",
   "browser": {
     "./out/cjs.node.js": "./out/esm.browser.js",
+    "./no-ext": "./out/esm.browser.js",
+    "./ext.js": "./out/esm.browser.js",
+    "./ext-index/index.js": "./out/esm.browser.js",
+    "./no-ext-index": "./out/esm.browser.js",
     "./not-browser.js": false,
+    "./multiple.dot.path.js": false,
     "jsdom": false
   }
 }

packages/playground/resolve/browser-field/relative.js

@@ -0,0 +1,9 @@
+import ra from './no-ext'
+import rb from './no-ext.js' // no substitution
+import rc from './ext'
+import rd from './ext.js'
+import re from './ext-index/index.js'
+import rf from './ext-index'
+import rg from './no-ext-index/index.js' // no substitution
+
+export { ra, rb, rc, rd, re, rf, rg }

packages/playground/resolve/index.html

@@ -114,8 +114,27 @@ <h2>resolve.conditions</h2>
   text('.dot', bar())
 
   // browser field
-  import value from 'resolve-browser-field'
-  text('.browser', value)
+  import main from 'resolve-browser-field'
+
+  import a from 'resolve-browser-field/no-ext'
+  import b from 'resolve-browser-field/no-ext.js' // no substitution
+  import c from 'resolve-browser-field/ext'
+  import d from 'resolve-browser-field/ext.js'
+  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 { 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 noSuccess = [b, g, rb, rg]
+
+  if (
+    [...success, ...noSuccess].filter((text) => text.includes('[success]'))
+      .length === success.length
+  ) {
+    text('.browser', main)
+  }
 
   import { msg as customExtMsg } from './custom-ext'
   text('.custom-ext', customExtMsg)
@@ -128,6 +147,7 @@ <h2>resolve.conditions</h2>
 
   // should be ok to import a file marked with browser: false
   import 'resolve-browser-field/not-browser'
+  import 'resolve-browser-field/multiple.dot.path'
 
   // css entry
   import css from 'normalize.css'

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

@@ -662,14 +662,20 @@ function mapWithBrowserField(
   relativePathInPkgDir: string,
   map: Record<string, string | false>
 ): string | false | undefined {
-  const normalized = normalize(relativePathInPkgDir)
+  const normalizedPath = path.posix.normalize(relativePathInPkgDir)
+
   for (const key in map) {
-    if (normalize(key) === normalized) {
+    const normalizedKey = path.posix.normalize(key)
+    if (
+      normalizedPath === normalizedKey ||
+      equalWithoutSuffix(normalizedPath, normalizedKey, '.js') ||
+      equalWithoutSuffix(normalizedPath, normalizedKey, '/index.js')
+    ) {
       return map[key]
     }
   }
 }
 
-function normalize(file: string) {
-  return path.posix.normalize(path.extname(file) ? file : file + '.js')
+function equalWithoutSuffix(path: string, key: string, suffix: string) {
+  return key.endsWith(suffix) && key.slice(0, -suffix.length) === path
 }