Vite fails to load browser field from engine.io-client when using yarn berry pnp

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When using yarn berry in pnp mode, Vite fails to properly load the package.json browser field from engine.io-client. This results in browser polyfills not loading.

Reproduction

1. Initialize a new yarn berry repo
2. yarn create @vitejs/app
3. Select preset vue-ts
4. cd into project
5. yarn add engine.io-client
6. In src/main.ts add the following lines import client from 'socket.io-client'; client
7. yarn dev

Load the site in the browser and open the console. You will see an error.

If you add nodeLinker: node-modules to the .yarnrc.yml file, the browser field detection works properly any you will not see errors.

System Info

• vite version: 2.0.0-beta.67
• Operating System: Pop!_OS 20.04
• Node version: 14.15.4
• Package manager (npm/yarn/pnpm) and version: yarn 2.4.0

P.S. I understand that yarn pnp is sometimes difficult to work with, but since this is a new project should it not try to work with yarn pnp from the get-go?

[swandir]

I find that in my case, setting pnpMode to loose also resolves the issue

The code fails here https://github.com/inspect-js/object-inspect/blob/main/index.js#L68

Because ./util.inspect.js is disabled for the browser here (which Vite fails to handle in PnP mode): https://github.com/inspect-js/object-inspect/blob/4ec8893ea9bfd28065ca3638cf6762424bf44352/package.json#L74-L76

And inside it a node’s builtin util is being imported: https://github.com/inspect-js/object-inspect/blob/4ec8893ea9bfd28065ca3638cf6762424bf44352/util.inspect.js#L1

Looks like PnP loose mode allows the bundler to pick up the util npm package that is present in your package tree but is not accessible in strict PnP mode because it’s not a dependency of object-inspect.

So, cause is the same, but PnP loose mode is only an accidental workaround in this case, which actually might be unwanted behavior.

[IanVS]

It seems I’m hitting this in the storybook builder for vite as well. I find that in my case, setting pnpMode to loose also resolves the issue, in case that’s useful information at all. Here’s a reproduction: https://github.com/IanVS/vite-pnp-object-inspect.