Handling of package.json browser field is not consistent with Webpack

[yongjun21]

Describe the bug

Vite's handling of browser field in package.json is not consistent with Webpack resulting in post-compilation syntax error when using certain isomorphic libraries.

This error is wrt dependency code, not user code. Therefore is similar to but not the same as #2802.

The spec for package.json browser field indicates that when false is specified, Webpack shall bundle an empty object in place of the module. However, it seems Vite's behavior is to ignore the module entirely hence name is undefined. Because the name is re-exported in the pre-bundle, this results in a Uncaught SyntaxError: local binding for export 'xxx' not found.

The bug repro below demostrates this:

The app is a bare repro that imports the library loaders.gl. This dependencies is itself depended by Deck.gl which is the original source of my issue as mentioned earlier by another Vite user: #2320.

As seen here https://github.com/visgl/loaders.gl/blob/master/modules/loader-utils/package.json#L32, loaders.gl has indicated in the package.json that some of the files should be ignored when bundling for browser. Based on the spec, the name node in this line https://github.com/visgl/loaders.gl/blob/master/modules/loader-utils/src/lib/binary-utils/buffer-utils.js#L2 will be assigned an empty object hence allowing this expression https://github.com/visgl/loaders.gl/blob/master/modules/loader-utils/src/lib/binary-utils/buffer-utils.js#L11 to safely move into the else case.

When running Vite's dev server, we end up with an uncaught syntax error as the node name is re-exported even though it is not being declared anywhere else in the module.

Reproduction

https://github.com/yongjun21/vite-bug-repro

System Info

System:
  OS: macOS 11.2.3
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 7.18 GB / 32.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 14.15.4 - /usr/local/bin/node
  Yarn: 1.23.0-20210103.1434 - /usr/local/bin/yarn
  npm: 6.14.10 - /usr/local/bin/npm
Browsers:
  Chrome: 89.0.4389.114
  Edge: 89.0.774.68
  Firefox: 87.0
  Safari: 14.0.3
npmPackages:
  @vitejs/plugin-vue: ^1.2.1 => 1.2.1 
  vite: ^2.1.5 => 2.1.5 

Used package manager: yarn

Logs

Uncaught SyntaxError: local binding for export 'node' not found

---

Before submitting the issue, please make sure you do the following

• 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.

• Provide a description in this issue that describes the bug.

• 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/vue-next instead.

• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[yongjun21]

Bug might be on esbuild side

[yongjun21]

@evanw has updated in evanw/esbuild#1124 that this problem has been fixed in latest version of esbuild. Can we bump esbuild version in Vite? Currently "esbuild": "^0.9.3". Because major version is still 0, package managers like npm only install up to the latest minor version which is 9.

[patak-dev]

We hope we can upgrade to 0.11.x soon @yongjun21. The version used in Vite is intentional because there are breaking changes in esbuild when jumping to a new minor version (because it is still at 0 as you stated). There were some changes in 0.10 that are beneficial to Vite but require some rework on Vite's usage of esbuild, so an update is in the backlog but it is not a direct version bump.

[nihalgonsalves]

This should be fixed by #2976 / #3282, released in v2.3.0