vitest icon indicating copy to clipboard operation
vitest copied to clipboard

Vite 6 compatibility issue

Open thebanjomatic opened this issue 1 year ago • 6 comments

Describe the bug

When using a browser-based evironment (happy-dom, jsdom, ~browser~), vitest still passes conditions: ['node'] in the resolve config.

When using Vite 5, this doesn't really matter because it would infer that we were targetting a web environment and it would resolve in that context anyway. I'm not 100% sure on how this worked before, but tryNodeResolve was being passed a targetWeb boolean and the returned ID will match the browser / default import conditions instead of the node condition.

With Vite 6 a lot of this default environment magic was stripped out as part of the Environments api refactor, and now it's just using the resolve.conditions from the corresponding client/ssr configs. This results in a change in behavior where Vitest now uses the node condition for browser environments when using Vite 6.

Using the node condition instead of browser can result in test failures due to differences in behavior between browser and node implementations of a library, but I've also run into issues where esbuild as part of deps optimization generates invalid code where the module itself is "babel compatible" but tries to deconstruct the named exports from import_mod1.default instead of import_mod1.

These issues reproduce in the latest Vitest 2.1.8 using a resolution for Vite 6.0.3, as well as Vitest 3.0.0-beta.2.

Reproduction

I'm still working on creating a reproducer that I can share and should be able to do so by the end of the day.

In terms of the actual code changes, I think these two locations can be changed to use:

conditions: [testConfig.environment === 'node' ? 'node' : 'browser']

https://github.com/vitest-dev/vitest/blob/4e60333dc7235704f96314c34ca510e3901fe61f/packages/vitest/src/node/plugins/index.ts#L88-L94

https://github.com/vitest-dev/vitest/blob/4e60333dc7235704f96314c34ca510e3901fe61f/packages/vitest/src/node/plugins/workspace.ts#L67-L73

But it's also a little unclear to me if we should be clearing out the mainFields: [], for the browser-based environments also.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 11.40 GB / 31.64 GB
  Binaries:
    Node: 20.18.0 - ~\AppData\Local\fnm_multishells\18680_1733347780000\node.EXE
    Yarn: 4.5.3 - ~\AppData\Local\fnm_multishells\18680_1733347780000\yarn.CMD
    npm: 10.9.1 - D:\source\delete-me\test-vite6\node_modules\.bin\npm.CMD
    bun: 1.1.29 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vite: ^6.0.0 => 6.0.3

Used Package Manager

yarn

Validations

thebanjomatic avatar Dec 11 '24 16:12 thebanjomatic