How to make packages that depend on msw/browser work in nextjs.

[nayounsang]

Abstract

• Like use msw/browser (like setupWorker) in nextjs project directly, It's difficult to get packages with msw/browser dependencies to work well in next.
• But, How to use it? There is a way.

problem situation

• In next.js project, It has my-package dependency.
• my-package has msw for peer dependency. And it uses setupWorker from msw/browser.
• my-package import msw/browser dynamically in browser env.

export const getMSWBrowser = async () => {
  if (typeof window === "undefined") return undefined;
  const mswBrowser = await import("msw/browser");
  return mswBrowser;
};

export const setupWorker = getMSWBrowser()
  .then((mod) => mod?.setupWorker)
  .catch(() => {
    console.error("Fail to import 'msw/browser' dynamically.");
    return undefined;
  });

• If use my-package in nextjs, It cannot resolve msw/browser from my-package. Why?!

Why

• msw has export property in package.json. msw/browser does not export anything in node(server) env.

    "./browser": {
      "types": "./lib/browser/index.d.ts",
      "browser": {
        "require": "./lib/browser/index.js",
        "import": "./lib/browser/index.mjs"
      },
      "node": null,
      "require": "./lib/browser/index.js",
      "import": "./lib/browser/index.mjs",
      "default": "./lib/browser/index.js"
    },

• use client directive is only works for files directly within Nextjs. I believe it doesn't recognize the use client directive within node_module or external workspace files. Therefore, using your package with use client is not enough.
• Next's build system runs on node and tries to parse all import statements (use client interprets it to work in the browser.).
• So, It can't resolve msw/browser in my-package. The build system want to resolve it in node(server) env. Because it located in node_modules or somewhere in the monorepo workspace.

How to fix it

• Import msw/browser only from browser with typeof window and dynamic import. standard example in msw docs
• If you import dynamically, you can ignore it at build time (although this is not professional practice). Ignore msw/browser in build process! It still works fine in runtime since build proccess just not analyzing it.

   webpack: (config, { isServer }) => {
    if (isServer) {
      config.resolve.alias["msw/browser"] = false;
    }
    return config;
  },

[nayounsang]

• Additional context
  I use rollup when build package.
  It want to forbid module level directives.
  Link: 'use client' directive for Client Components rollup/rollup#4699 (comment)