vite does not handle "browser" field in package.json properly, when using package 'tapable'

Describe the bug

Just install npm package tapable, and import it in main.js

import { SyncHook } from 'tapable';
console.log('load Hook', SyncHook);

Then the console will print an error:

Then I digged into node_modules/tapable/package.json, and it use browser field for different platforms.

and package util is imported in tapable/lib/Hook.js Line 7

So In expected result, I will get the file util-browser involved, which described in browser. But actually the pre-bundled code just resolved this into some compatibility code.

So how can I solve this?

Reproduction

https://stackblitz.com/edit/vitejs-vite-6grfch?file=main.js

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 105.61 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.19.0/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-legacy: ^1.7.1 => 1.8.0
    vite: ^2.8.3 => 2.9.1

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.

[zizifn]

Does this fix is in "vite": "^3.2.0-beta.0",? if so, I don’t think this is fixed, please check the test repo compare to webpack with more details about the test case. https://github.com/zizifn/vite-browser-test

[asiaziola]

Hey, similair issue. I’m using dependency which sets couple of modules to false in browser field. However, they are still included in the build