Module not found: Package path ./node is not exported from package ./node_modules/msw

[kmiwa007]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Node.js version

v18.16.0

Reproduction repository

N/A

Reproduction steps

Using "msw": "^0.0.0-fetch.rc-16", and "next": "^12.3.4",.

Current behavior

Throw error

error - ./mocks/server.ts:1:0
Module not found: Package path ./node is not exported from package <app_path>/node_modules/msw/package.json)
> 1 | import { setupServer } from 'msw/node';

Expected behavior

No import error

[kettanaito]

Hi, @kmiwa007. Thanks for reporting this.

As I see, this error is thrown by Next.js compilation itself, isn't it?

Right now, MSW doesn't officially support any version of Next, as there have been some internal changes in Next.js that prevent MSW from functioning correctly. We've raised this with the Next.js team and you can follow the progress on this issue as well as contribute to it here: #1644. Unfortunately, until that's addressed we won't be accepting Next.js-related issues.

[egorpavlikhin]

The same happens in Remix v2 which runs on Node 18, I don't believe it's related to anything Next.js specific.

[kettanaito]

@egorpavlikhin, can you please submit a reproduction repository for that behavior? I've got a fully functional Remix V2 app with MSW without any module errors.

[patrickweaver]

@kettanaito I'm seeing this issue with Remix v2 also, repro here: https://github.com/patrickweaver/msw-remix

[amanape]

My solution (for Remix) was moving server.listen() to entry.server.tsx instead of entry.client.tsx or root.tsx.

entry.server.tsx

/**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */

import { PassThrough } from "node:stream";

import type { AppLoadContext, EntryContext } from "@remix-run/node";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { server } from "./mocks/node";

const ABORT_DELAY = 5_000;

if (process.env.NODE_ENV === "development") {
  server.listen();
}

/* ... rest of code ... */

[kettanaito]

@amanape, that's exactly how one should integrate MSW with Remix! setupServer is a server-side API, so it must be added to entry.server. For everyone else, please take advantage of our Examples that feature a few frameworks and how to integrate MSW with them.

[sankarkumar-durairaj]

@kettanaito @amanape I'm also facing same issue mentioned above, but in my case it's a mono repo angular application. Where should I place server.listen() in angular application?. As per some suggestion, placed under environment.ts file, still I'm getting same error,

environment.e2e.ts:

import { server } from '../mocks/msw-server-setup';
server.listen();

export const environment = {
production: false,
};

project.json: (project-name - uem-mod-ui)

targets => build => configurations =>
"e2e": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"baseHref": "/uem-mod-ui/",
"fileReplacements": [
{
"replace": "apps/uem-mod-ui/src/environments/environment.ts",
"with": "apps/uem-mod-ui/src/environments/environment.e2e.ts"
}
]
}

Running application using below command:

nx serve uem-mod-ui --configuration=e2e