Vitest Browser Mode 2.1.4 regression: ReferenceError: process is not defined

[ezzatron]

Describe the bug

When using Vitest Browser Mode with Next.js + the next/link component, there's a regression in Vitest 2.1.4 that produces the following error:

ReferenceError: process is not defined
 ❯ node_modules/next/dist/client/has-base-path.js ../../../../../node_modules/.vite/deps/next_link.js:553:20
 ❯ node_modules/next/dist/shared/lib/router/utils/is-local-url.js ../../../../../node_modules/.vite/deps/next_link.js:579:24
 ❯ node_modules/next/dist/client/resolve-href.js ../../../../../node_modules/.vite/deps/next_link.js:[16](https://github.com/ezzatron/vitest-browser-process-not-defined-repro/actions/runs/11713569546/job/32626585117#step:6:17)58:23
 ❯ node_modules/next/dist/client/link.js ../../../../../node_modules/.vite/deps/next_link.js:2360:24
 ❯ node_modules/next/link.js ../../../../../node_modules/.vite/deps/next_link.js:2732:22

Possibly related to #6842.

Reproduction

See https://github.com/ezzatron/vitest-browser-process-not-defined-repro

You can see the repo working under Vitest 2.1.3 and not working under 2.1.4 here: https://github.com/ezzatron/vitest-browser-process-not-defined-repro/actions/runs/11713569546:

System Info

Not relevant, happens under GHA and locally on my machine, but anyway:

  System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.04 GB / 32.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 23.1.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    bun: 1.1.34 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 130.0.6723.116
    Edge: 130.0.2849.68
    Safari: 18.1
  npmPackages:
    @vitejs/plugin-react: ^4.3.3 => 4.3.3
    @vitest/browser: 2.1.4 => 2.1.4
    vitest: 2.1.4 => 2.1.4

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.

[hi-ogawa]

process not available on browser mode is intended. Can you check how next/link uses process?

[hi-ogawa]

Hmm, I remember they have many process.env defines, so you might need to this manually https://github.com/vercel/next.js/blob/d8c1875800903542bd4e89116f4c8aa32cc853bf/packages/next/src/build/webpack/plugins/define-env-plugin.ts#L257 or you can try catch all process.env for now.

export default defineConfig({
  define: {
    'process.env': JSON.stringify({})
  }
})

This should give mostly same behavior as v2.1.3.

[ezzatron]

Hmm, I remember they have many process.env defines

Yes, I believe the offending line is this one: https://github.com/vercel/next.js/blob/d8c1875800903542bd4e89116f4c8aa32cc853bf/packages/next/src/client/has-base-path.ts#L3

[ezzatron]

So I guess this is because of #6718 which landed in 2.1.4?

[hi-ogawa]

Yes, that PR. there shouldn't be process nor process.env by default on browser testing, so it's working intended.

[ezzatron]

No worries, it seems like explicitly defining process.env should work fine as a workaround. Are there any docs that should be updated to clarify this? I guess there's probably nothing about specifically using Vitest Browser Mode with Next.js yet.

[ezzatron]

Sorry, I spoke too soon. That fix only works if you're not using Vitest workspaces. When I went to apply it to my actual project, the define config doesn't help, regardless of whether it's in vitest.config.ts or vitest.workspace.ts.

I've updated the reproduction to show this: https://github.com/ezzatron/vitest-browser-process-not-defined-repro/actions/runs/11714232660

[hi-ogawa]

Okay, that could be a different workspace issue. You need to use either extends: './vitest.config.ts' like this:

// vitest.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": JSON.stringify({}),
  },
  test: {
    watch: false,
  },
});


// vitest.workspace.ts
import react from "@vitejs/plugin-react";
import { defineProject, defineWorkspace } from "vitest/config";

export default defineWorkspace([
  {
    extends: './vitest.config.ts',
    test: {
      name: "project",
      browser: {
        enabled: true,
        headless: true,
        provider: "playwright",
        name: "chromium",
      },
    },
  },
]);

or point to a dedicated config file from workspace

// vitest.config.browser.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": JSON.stringify({}),
  },
  test: {
    name: "project",
    browser: {
      enabled: true,
      headless: true,
      provider: "playwright",
      name: "chromium",
    },
  },
});

// vitest.workspace.ts
export default defineWorkspace([
  './vitest.config.browser.ts'
]);

I'm not exactly sure if this is a bug or not. We know there is some limitations regarding how we can pass config object to browser mode and things work better if there is a dedicated config file for browser mode vite server to consume. Probably similar to #5015

[ezzatron]

Thank you! Can confirm that using extends seems to work for my use case.

[hi-ogawa]

I'm investigating further and I'm not sure what I said in #6872 (comment) is correct. It looks like there's something odd going on specifically to define and process.env.

(But again, having a dedicated config file for browser mode should work more consistent with normal Vite dev usage.)

[ezzatron]

(But again, having a dedicated config file for browser mode should work more consistent with normal Vite dev usage.)

Sounds good, will keep an eye out for it. Appreciate the help 🙏