Building with yarn pnp (yarn 2+) ignores the 'browser' element of the package.json

Describe the bug

The title pretty much says it. Unfortunately I don’t have the time to provide a reproduction. I can however provide a fix (see below) that I have tested in my environment.

The problem is with yarn pnp the importer ends up having a /* appended to it in some cases (I don’t fully understand why). This causes the check of the idToPkgMap in the resolver to fail since it misses, so the browser-specific resolution from the package.json is never found. Solution is to add an entry with the /* to the map in the yarn pnp case.

This shows up clearly when using the aws-sdk for example in a browser app (it will fail at runtime trying to reference a nodejs module).

Index: packages/vite/src/node/plugins/resolve.ts
<+>UTF-8
===================================================================
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
--- a/packages/vite/src/node/plugins/resolve.ts	(revision a4895ed9d71531c71243ffcb3aab465ecd5694a0)
+++ b/packages/vite/src/node/plugins/resolve.ts	(date 1643617573205)
@@ -10,6 +10,7 @@
   OPTIMIZABLE_ENTRY_RE
 } from '../constants'
 import {
+  isRunningWithYarnPnp,
   isBuiltin,
   bareImportRE,
   createDebugger,
@@ -557,6 +558,10 @@
 
   // link id to pkg for browser field mapping check
   idToPkgMap.set(resolved, pkg)
+  if (isRunningWithYarnPnp) {
+    // Corresponds to yarn pnp resolve in esBuildDepPlugin
+    idToPkgMap.set(path.dirname(resolved) + '/*', pkg)
+  }
   if (isBuild) {
     // Resolve package side effects for build so that rollup can better
     // perform tree-shaking

Reproduction

none

System Info

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 19.67 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 3.1.1 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v14.17.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[swandir]

As a temporary workaround you may apply commits from the PR on top of a Vite version you need, pack a tarball and use it via file: protocol (example)

[francisu]

As a temporary workaround you may apply commits from the PR on top of a Vite version you need, pack a tarball and use it via file: protocol (example)

I have done that and confirm that your PR fixes my issue, AWS works correctly with yarn pnp in the browser. Thanks for the work on this and I hope they merge it soon!