Error: Package subpath './browser' is not defined by "exports" (React/Vite)

jongirard commented 4 months ago

Prerequisites

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

Environment check

[X] I'm using the latest msw version
[X] I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.), Firefox, Safari

Reproduction repository

https://github.com/jongirard/msw-browser-repro

Reproduction steps

yarn install
Then run yarn test

Current behavior

Error Error: Package subpath './browser' is not defined by "exports" in /Users/x/JS/msw-repro/node_modules/msw/package.json imported from /Users/x/JS/msw-repro/src/msw/browser.ts

Expected behavior

Test should run without error

jongirard commented 4 months ago

The one other issue I've seen (in a next app) for this similar issue was https://github.com/mswjs/msw/issues/1877 however, it appears closed and there was some uncertainty around what the preferred/actual fix for this is. Opening a new issue since this is happening on a brand new react-ts app with Vite (yarn create vite my-react-app --template react-ts).

Abderazak-Amiar commented 4 months ago

Need to add extension ".ts" to the imported file ./browser.ts

germanny commented 4 months ago

I'm getting the same issue with msw/node, by the way:

Module not found: Package path ./node is not exported from package /node_modules/msw (see exports field in /node_modules/msw/package.json)
> 1 | import { setupServer } from 'msw/node';
  2 | import { handlers } from './handlers';
  3 |
  4 | export const server = setupServer(...handlers);

AlexanderShabalinMaersk commented 3 months ago

I am also getting this issue. Please fix this bug

Sayvai commented 2 months ago

Dependency Versions:

msw: 2.3.1
@playwright/test: 1.46.1

I'm also receiving the same error message when attempting to integrate msw into Playwright inside a Vite / React project, and wanting to re-use the existing worker and just overwrite the handlers that is used (successfully) by the main app, with the Playwright specific handlers.

The error message i get from the console is as follows:

Error: Package subpath './browser' is not defined by "exports" in /Users/sayvai/repos/some_repo/client/node_modules/msw/package.json imported from /Users/sayvai/repos/some_repo/client/e2e/fixtures/test.ts

And here is the browser.ts file which creates the worker:

/** client/src/mocks/browser.ts **/

import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

And here is the Playwright fixture configuration file which I am attempting to integrate MSW, contains the following relevant code snippet:

/** client/e2e/fixtures/test.ts **/

const test = base.extend<ExtendedTestOptions>({
  // Add custom fixtures here
  worker: [
    async ({ page }, use) => {

      const { worker } = await import("../../src/mocks/browser"); // 👈 error appears to originate from this line

      // attempt to overwrite main app msw handlers with a custom set of Playwright handlers here
      worker.resetHandlers(...handlers); 

      await use(worker);
    },
    { scope: "test", auto: true },
  ],
});

Just out of pure curiosity and further troubleshooting, the error also appears when i simply import msw/browser at the top of the Playwright fixture test file (without any named imports)..

/** client/e2e/fixtures/test.ts **/

import { expect, test as base } from "@playwright/test";
import { http } from "msw";
import "msw/browser"; // 👈 error also appears to originate from this line when testing a simple import

I mean, msw service / intercept works fine when running with the app in dev mode. It is just that when i also start Playwright server, I get the error message pasted above.. 🤔

kettanaito commented 2 months ago

Thanks for reporting this.

This isn't a bug. This is a sign that you are using MSW incorrectly.

For example, importing msw/browser in a Playwright fixtures file is a mistake. That file runs in Node.js, and you are trying to import a browser-specific package there. That is a broken intention, so please don't do that! Instead, import msw/browser as a part of your app's runtime. We have a bunch of usage examples precisely for that reason: see the one with Playwright https://github.com/mswjs/examples/tree/main/examples/with-playwright.

The OP has the same mistake by importing msw/browser as a part of the test module (https://github.com/jongirard/msw-browser-repro/blob/2e21b3a9edccec1725f9ff47b92f8a8753dd0742/tests/example.spec.ts#L2). I've just described above how to fix this.

Remember that Playwright runs in two environments:

Your tests and your setup runs in Node.js, where you cannot use msw/browser by design.
Your app runs in the browser. And that's where you are supposed to use msw/browser.

Once again, use the examples repo as a reference whenever in doubt. Thanks.

mswjs / msw