ReferenceError: Response is not defined with msw/node + Vitest

Question

Was wondering if anyone has encountered the following issue with the latest msw (2.0.9) and trying to run it with the latest Vite (5.0.2) + Vitest (0.34.6)? No matter what I do, I cannot get past this error of Response somehow being undefined despite having cross-fetch installed as well along with @types/node.

My installed TypeScript version is 5.3.2 which doesn't satisfy the peerDependency of msw which is set up to 5.2.x, but I did downgrade it to meet the requirements and I was still met with the same error.

ReferenceError: Response is not defined
 ❯ node_modules/.pnpm/[email protected][email protected]/node_modules/msw/lib/core/HttpResponse.mjs:5:28
 ❯ src/setupTests.ts:3:31
      1| import "@testing-library/jest-dom";
      2| import fetch from "cross-fetch";
      3| import { setupServer } from "msw/node";
       |                               ^

For reference, my vite.config.ts is the following:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 4000,
  },
  define: {
    "process.env": {
      VERSION: process.env.VERSION,
      PLAYWRIGHT: process.env.PLAYWRIGHT,
      USE_MSW: process.env.USE_MSW,
    },
  },
  resolve: {
    mainFields: ["module"],
    alias: {
      src: "/src",
    },
  },
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: "./src/setupTests.ts",
    watch: false,
    // Need to concat with config defaults otherwise node_modules get tested
    exclude: [...configDefaults.exclude, "src/e2e/*"],
    coverage: {
      provider: "istanbul",
      exclude: [".eslintrc.cjs", "src/index.tsx", "playwright.config.ts", ".github/*"],
      all: true,
      lines: 100,
      functions: 100,
      branches: 100,
      statements: 100,
      reporter: ["json", "lcov", "text", "cobertura"],
    },
  },
});

Hoping someone can help.

Answer 1

Managed to finally get through it after trying so many different things. Turns out, the only thing that needed to be done in setupTests.ts was the following:

import "cross-fetch/polyfill";