Vitest fails to run with browser mode, displaying a blank screen

[ranile]

Describe the bug

Running vitest results in the following error in browser console:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/@vitest/utils/node_modules/pretty-format/build/index.js?v=aa51a3dc' does not provide an export named '__vi_inject__' (at index.js?v=aa51a3dc:3:10)

Only a blank white page is displayed.

Reproduction

1. Git clone https://github.com/hamza1311/vitest-bug-repro
2. npm install
3. npx vitest
4. Observe console of the browser

System Info

System:
    OS: Linux 6.3 Arch Linux
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
    Memory: 3.47 GB / 15.29 GB
    Container: Yes
    Shell: 3.6.1 - /usr/bin/fish
  Binaries:
    Node: 16.19.1 - /run/user/1000/fnm_multishells/591681_1684781270672/bin/node
    Yarn: 1.22.19 - /run/user/1000/fnm_multishells/591681_1684781270672/bin/yarn
    npm: 8.19.3 - /run/user/1000/fnm_multishells/591681_1684781270672/bin/npm
  Browsers:
    Firefox: 113.0.1
  npmPackages:
    @vitest/browser: ^0.31.1 => 0.31.1 
    @vitest/ui: ^0.31.1 => 0.31.1 
    vite: ^4.3.8 => 4.3.8 
    vitest: ^0.31.1 => 0.31.1

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.

[van-fe]

I don't think that the browser mode's contributors have run their codes practically. This mode never run correctly on my machine after it provides.

[sheremet-va]

I don't think that the browser mode's contributors have run their codes practically. This mode never run correctly on my machine after it provides.

There is a test for a browser mode that is used to test this feature manually, and it also runs in CI. There is no reason to blame anyone. If you don't have anything constructive to say, just don't say anything.

[enjikaka]

Getting the same trying to set up vitest. The following is thrown in the test browser console:

Uncaught (in promise) SyntaxError: The requested module '/@fs/Users/xx/dev/xx/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js?v=e4b3aab2' does not provide an export named '__vi_inject__'

[AriPerkkio]

The minimal reproduction case here works if you install @vitest/utils explicitly. This can be used as work-around for now. The root cause still needs to be resolved in @vitest/browser package though.

[enjikaka]

The minimal reproduction case here works if you install @vitest/utils explicitly. This can be used as work-around for now. The root cause still needs to be resolved in @vitest/browser package though.

Thanks. Installing that utils package made it run for me.

[jd-solanki]

Installing vitest utils doesn't work for me 🤷🏻‍♂️

[jd-solanki]

Hey team 👋🏻

I haven't written any tests since I encoutered this issue (maybe a month). Is this planned anytime soon? This will help me decide should I move to jsdom & disable browser mode.

Thanks.

[AriPerkkio]

In @vitest/[email protected] the error message has changed to new one:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: exports is not defined
 ❯ http:/localhost:63315/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js?v=d4e0d767:3:23

Now browser mode is trying to load CJS version of pretty-format into browser and fails to run it.

The http://localhost:63315/node_modules/.pnpm/@[email protected]/node_modules/@vitest/utils/dist/index.js file contains import "/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js?v=6111ce5f" which loads http://localhost:63315/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js as CJS:

'use strict';

Object.defineProperty(exports, '__esModule', {
//                   ^^^^^^^^
// ReferenceError: exports is not defined
    value: true
});
exports.default = exports.DEFAULT_OPTIONS = void 0;
exports.format = format;
exports.plugins = void 0;

var _ansiStyles = _interopRequireDefault(require('ansi-styles'));
...

This cannot be reproduced in Vitest monorepo but using the packages in separate project always runs into this. Installing @vitest/utils as work-around still works though.

[NathanVss]

In @vitest/[email protected] the error message has changed to new one:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: exports is not defined
 ❯ http:/localhost:63315/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js?v=d4e0d767:3:23

Now browser mode is trying to load CJS version of pretty-format into browser and fails to run it.

The http://localhost:63315/node_modules/.pnpm/@[email protected]/node_modules/@vitest/utils/dist/index.js file contains import "/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js?v=6111ce5f" which loads http://localhost:63315/node_modules/.pnpm/[email protected]/node_modules/pretty-format/build/index.js as CJS:

'use strict';

Object.defineProperty(exports, '__esModule', {
//                   ^^^^^^^^
// ReferenceError: exports is not defined
    value: true
});
exports.default = exports.DEFAULT_OPTIONS = void 0;
exports.format = format;
exports.plugins = void 0;

var _ansiStyles = _interopRequireDefault(require('ansi-styles'));
...

This cannot be reproduced in Vitest monorepo but using the packages in separate project always runs into this. Installing @vitest/utils as work-around still works though.

I have the exact same error but installing @vitest/utils as a devDependency does not solve the problem on my side. I tried to delete node_modules and yarn.lock to double-check but the error is still occurring 😕

[AriPerkkio]

This is fixed and released in [email protected] and @vitest/[email protected]. The @vitest/utils package is no longer needed to be installed as work-around.

[NathanVss]

This is fixed and released in [email protected] and @vitest/[email protected]. The @vitest/utils package is no longer needed to be installed as work-around.

Sadly those are the versions installed on my side with the bug still ocurring

$ yarn list | grep vitest

│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ [email protected]
│  ├─ [email protected]
├─ @vitest/[email protected]
├─ @vitest/[email protected]
├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
├─ @vitest/[email protected]
├─ @vitest/[email protected]
├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
├─ @vitest/[email protected]
├─ [email protected]
├─ [email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]
│  ├─ @vitest/[email protected]

[userquin]

@NathanVss can you provide a minimal repro using yarn?

[getflourish]

Came here because I’ve installed vitest into a fresh vite project and can’t run any test:
Error: Your application tried to access ansi-styles, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

[reekystive]

Add this two dependencies to project package.json resolved my issue.

"pretty-format": "^29.5.0",
"diff-sequences": "^29.4.3"

I'm using vitest 0.32.4.

Without pretty-format I'm getting:

ReferenceError: exports is not defined
 ❯ <...>/node_modules/@vitest/utils/node_modules/pretty-format/build/index.js?v=4c9d75d5:3:23

Without diff-sequences I'm getting:

SyntaxError: The requested module '<...>/node_modules/@vitest/utils/node_modules/diff-sequences/build/index.js?v=4c9d75d5' does not provide an export named '__vi_inject__'

This only happens while I'm adding vitest to an existing project (that project is using yarn). If I start a new project, It seems there's no any issue. So I think maybe It's something related to dependencies' version.