Vitest doesn't handle package.json `exports` conditions like `browser`

[segevfiner]

Describe the bug

We have a package that has a browser ESM & Node CJS & ESM builds. So exports looks something like this:

  "exports": {
    "types": "./dist/node.d.ts",
    "browser": "./dist/browser.mjs",
    "import": "./dist/node.mjs",
    "require": "./dist/node.js"
  },

Vitest selects the Node ESM build even with environment: "jsdom". Annoyingly, this can be a good thing for some packages, and bad for others in tests.

See https://jestjs.io/docs/29.0/configuration#testenvironmentoptions-object for the config and special comment syntax for this issue supported by Jest.

This might be difficult to support without loader hooks though Node does have a --conditions flag.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-4jwegg?file=test/basic.test.ts

System Info

System:
    OS: macOS 12.6.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 123.48 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2

Used Package Manager

npm

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

[segevfiner]

cc @talkor

[sheremet-va]

Browser condition usually has ESM that Node doesn't support (like imports without .js extension or no type: "module"), so yes, Vitest doesn't add it even with jsdom enabled, because it just won't run in most cases.

You can enable browser condition (or any condition), using config:

export default {
  resolve: {
    conditions: ['browser']
  }
}

Vitest passes these conditions to Node with --conditions flag that you mentioned, and also uses this flag to resolve imports inside your source code with Vite.

[segevfiner]

Is this in the docs? This whole ESM, CJS, Browser, Node stuff is truly awful...

[sheremet-va]

Is this in the docs?

This is part of Vite configuration, Vitest doesn't duplicate it, but mentions it:

In addition to the following options, you can also use any configuration option from Vite. For example, define to define global variables, or resolve.alias to define aliases.

This whole ESM, CJS, Browser, Node stuff is truly awful...

It truly is

[ranile]

I ran into this issue and created a stackblitz for repro: https://stackblitz.com/edit/vitest-dev-vitest-vhpesz that uses browser mode but doesn't load browser modules.

I put

  resolve: {
    conditions: ['browser']
  }

in my vite.config.ts but it didn't help. If someone can provide a fixed version of this stackblitz, that would be very helpful.

CC: @sheremet-va

[sheremet-va]

I put

conditions are for exports field. If you rely on the main field, use resolve.mainFields

[ranile]

I've used:

resolve: {
    conditions: ['browser'],
    mainFields: ['browser'],
  },

and had the same result. Removing main and browser from package.json doesn't help either. If you could provide a working stackblitz, I would appreciate that

[segevfiner]

If I have tests using both a node environment and a jsdom environment, configuring conditions, mainFields and/or resolve.alias/test.alias becomes troublesome to do per environment to resolve such issues, any tips?

[sheremet-va]

If I have tests using both a node environment and a jsdom environment, configuring conditions, mainFields and/or resolve.alias/test.alias becomes troublesome to do per environment to resolve such issues, any tips?

You can use Vitest workspace for this.

[DylanPiercey]

FYI manually telling node to use the --conditions=browser flag (or via env NODE_OPTIONS="--conditions=brower") helped me get past this. Perhaps this is something that the envs (eg jsdom) could do automatically?

[sheremet-va]

Perhaps this is something that the envs (eg jsdom) could do automatically?

Using browser condition will break most application tests. It’s usually not meant to run in Node.js.

[DylanPiercey]

@sheremet-va right, Ideally you'd be able to configure this for specific envs (eg in a workspace).

[DylanPiercey]

Also FWIW in jest that condition is loaded by default for browser envs so I'm curious why not enable that (within the test thread)? You say it would break most tests, but again this is kind of expected since the real app running (usually via bundler, but also via jest) will load the browser export.

[sheremet-va]

Because it cases a ton of problems and literally breaks your tests (lookup jest issues). It is probably one of the worst decisions jest team made. browser condition may be UMD build, it can be unprocessed ESM - it can be anything. Vitest prioritizes working code and performance over semantics.