msw-storybook-addon: Breaks on building Storybook

While building the Storybook, the bundler (Vite) emits an error like this:

[commonjs--resolver] No known conditions for "./native" specifier in "msw" package

This is because of the code here. While it’ll work without any problem when not built, this will break on browser builds because…

The bundler doesn’t know whether IS_REACT_NATIVE is true or false at build time, therefore it should try to bundle both versions.
However, since the bundler is building for browsers and that enables the browser export condition, the entry resolves to null and it errors.

This problem should be fixed by adding separate entries for each browser and native.

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 24
Comments: 18

Most upvoted comments

Hey everyone! If you’re using MSW 2.0.0, we just released a new beta version that should have fixed this issue: msw-storybook-addon@2.0.0-beta.1.

Would you please try it out and let us know? Thank you! cc @satoshi-izawa @marksulls tagging you since I know you’re using msw 2!

yannbf on Jan 30, 2024

Fixed by fixing the dep version in package.json

"msw-storybook-addon": "2.0.0-beta.2",
"@mswjs/interceptors": ">=0.26.14",
"msw": "2.3.0-ws.rc-1"

towry on Mar 29, 2024

for those using vite, I was able to fix the not found ./native module by adding this to vite.config

  resolve: {
    alias: {
      'msw/native': require.resolve(path.resolve(__dirname, './node_modules/msw/lib/native/index.mjs')),
    },
  },

mribichich on Jan 11, 2024

Hey everyone! Finally the major version is out. Sorry for such a long wait, I had to make sure the addon aligned with Storybook 8 and worked correctly in the portable stories (using stories in Vitest,Jest) scenario.

Please check the release notes, try it out and provide feedback in case issues arise: https://github.com/mswjs/msw-storybook-addon/releases/tag/v2.0.0

Thanks!

yannbf on Apr 17, 2024

The types aren’t correct for the 2.0.0-beta1 but everything else works otherwise!

magus on Feb 3, 2024

For those who try it out, be very careful with your version specification in package.json. There’s a “next” version of 2.0.0, 2.0.0-next.1, that is 9 months old – but e.g. a version pin of >= 2.0.0-beta.1 will select that one. I suggest double checking your lockfile to see exactly what version you end up with.

bmulholland on Jan 30, 2024

worked for me: //vite.config.ts


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { createRequire } from "node:module";
import path from "path";
const require = createRequire(import.meta.url);

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "msw/native": require.resolve(
        path.resolve(__dirname, "./node_modules/msw/lib/native/index.mjs")
      ),
    },
  },
});

henrybravos on Jan 29, 2024

I faced the same problem node_modules/vite/node_modules/esbuild/lib/main.js:1374:21: ERROR: [plugin: vite:dep-pre-bundle] No known conditions for "./native" specifier in "msw" package

msw-storybook-addon: 2.0.0-beta.0 msw: 2.0.13 vite: 5.0.11

satoshi-izawa on Jan 10, 2024