fix(resolve): also respect browser mapping of dependencies

fix #1547
vitejs · Jan 15, 2021 · 12b706d · 12b706d
1 parent 6a9a4aa
commit 12b706d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/packages/playground/resolve/browser-field/out/esm.browser.js b/packages/playground/resolve/browser-field/out/esm.browser.js
@@ -1 +1,2 @@
+import jsdom from 'jsdom' // should be redireted to empty module
 export default '[success] resolve browser field'
diff --git a/packages/playground/resolve/browser-field/package.json b/packages/playground/resolve/browser-field/package.json
@@ -5,6 +5,7 @@
   "main": "out/cjs.node.js",
   "browser": {
     "./out/cjs.node.js": "./out/esm.browser.js",
-    "./not-browser.js": false
+    "./not-browser.js": false,
+    "jsdom": false
   }
 }
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -112,21 +112,16 @@ export function resolvePlugin(
         const basedir = importer ? path.dirname(importer) : process.cwd()
         let fsPath = path.resolve(basedir, id)
         // handle browser field mapping for relative imports
-        const pkg = importer && idToPkgMap.get(importer)
-        if (pkg && isObject(pkg.data.browser)) {
-          const pkgRelativePath = './' + slash(path.relative(pkg.dir, fsPath))
-          const browserMappedPath = mapWithBrowserField(
-            pkgRelativePath,
-            pkg.data.browser
-          )
-          if (browserMappedPath) {
-            fsPath = path.resolve(pkg.dir, browserMappedPath)
-          } else {
-            return browserExternalId
-          }
+
+        if (
+          (res = tryResolveBrowserMapping(fsPath, importer, true, isProduction))
+        ) {
+          return res
         }
+
         if ((res = tryFsResolve(fsPath, isProduction))) {
           isDebug && debug(`[relative] ${chalk.cyan(id)} -> ${chalk.dim(res)}`)
+          const pkg = idToPkgMap.get(id)
           if (pkg) {
             idToPkgMap.set(res, pkg)
             return {
@@ -164,6 +159,12 @@ export function resolvePlugin(
           return res
         }
 
+        if (
+          (res = tryResolveBrowserMapping(id, importer, false, isProduction))
+        ) {
+          return res
+        }
+
         if (
           (res = tryNodeResolve(
             id,
@@ -535,6 +536,34 @@ function resolveDeepImport(
   }
 }
 
+function tryResolveBrowserMapping(
+  id: string,
+  importer: string | undefined,
+  isFilePath: boolean,
+  isProduction: boolean
+) {
+  let res: string | undefined
+  const pkg = importer && idToPkgMap.get(importer)
+  if (pkg && isObject(pkg.data.browser)) {
+    const mapId = isFilePath ? './' + slash(path.relative(pkg.dir, id)) : id
+    const browserMappedPath = mapWithBrowserField(mapId, pkg.data.browser)
+    if (browserMappedPath) {
+      const fsPath = path.resolve(pkg.dir, browserMappedPath)
+      if ((res = tryFsResolve(fsPath, isProduction))) {
+        isDebug &&
+          debug(`[browser mapped] ${chalk.cyan(id)} -> ${chalk.dim(res)}`)
+        idToPkgMap.set(res, pkg)
+        return {
+          id: res,
+          moduleSideEffects: pkg.hasSideEffects(res)
+        }
+      }
+    } else {
+      return browserExternalId
+    }
+  }
+}
+
 /**
  * given a relative path in pkg dir,
  * return a relative path in pkg dir,