Cannot find module 'msw/node' from

Question

I am using MSW to mock server requests. I recently updated to v2, after which began seeing a module not found error when trying to import setupServer from the msw/node import path. I can see the file in my node modules folder, I know it is there. What would cause this issue? How can I fix it?

Node version: 20.9.0 (current lts)

Pnpm version: 8.10.0

package.json

{
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.3.2",
    "@mui/material": "^5.14.15",
    "@mui/icons-material": "^5.14.15",
    "awilix": "^9.0.0",
    "axios": "^1.6.0",
    "cookies": "^0.8.0",
    "joi": "^17.11.0",
    "joi-password": "^4.1.1",
    "jotai": "^2.5.0",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.21",
    "next": "^14.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.47.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@playwright/test": "^1.39.0",
    "@testing-library/dom": "^9.3.3",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@types/cookies": "^0.7.9",
    "@types/jest": "^29.5.7",
    "@types/js-cookie": "^3.0.5",
    "@types/jsdom": "^21.1.4",
    "@types/lodash": "^4.14.200",
    "@types/node": "^20.8.10",
    "@types/react": "^18.2.33",
    "@types/zxcvbn": "^4.4.3",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "eslint": "^8.52.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-config-next": "^14.0.1",
    "eslint-config-standard": "^17.1.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-jest": "^27.6.0",
    "ignore-loader": "^0.1.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "msw": "^2.0.1",
    "node-fetch": "^3.3.2",
    "react-test-renderer": "^18.2.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2",
    "whatwg-fetch": "^3.6.19"
  }
}

ts config

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["node", "jest", "@testing-library/jest-dom"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./jest.setup.ts"],
  "exclude": ["node_modules"]
}

jest config

import nextJest from 'next/jest';
import { Config } from 'jest';

module.exports = nextJest({ dir: '.' })({
  roots: ['<rootDir>/src'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jsdom',
  collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
} as Config);

jest setup file

import '@testing-library/jest-dom';
import 'whatwg-fetch';

file where error occurs

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

export default server;

error

Test suite failed to run

    Cannot find module 'msw/node' from 'path/to/file.ts'

Answer 1

Your issue is probably related with msw migration from v1 to v2. In the documentation you can find your issue described here

From the docs:

This error is thrown by your test runner because JSDOM uses the browser export condition by default. This means that when you import any third-party packages, like MSW, JSDOM forces its browser export to be used as the entrypoint. This is incorrect and dangerous because JSDOM still runs in Node.js and cannot guarantee full browser compatibility by design.

To fix this, set the testEnvironmentOptions.customExportConditions option in your jest.config.js to ['']:

// jest.config.js
module.exports = {
  testEnvironmentOptions: {
    customExportConditions: [''],
  },
}

This will force JSDOM to use the default export condition when importing msw/node, resulting in correct imports.