Breaks on building Storybook

[XiNiHa]

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.

[belandrio]

I am facing the same issue

[YouHusam]

I am having the same issue, are there any workarounds?

[satoshi-izawa]

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

[mribichich]

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')),
    },
  },

[jetzhliu]

npm i --save-dev msw@^1
ref: https://github.com/mswjs/msw-storybook-addon/blob/main/packages/msw-addon/package.json#L45

[marksulls]

Similar to the Vite specific fix above, this Webpack configuration is working for me (Angular / Storybook / Nx workspace):

in .storybook/main.ts:

import { StorybookConfig } from "@storybook/angular";
import * as path from "path";

const config: StorybookConfig = {
  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-interactions',
    '@storybook/addon-docs',
    '@storybook/addon-essentials',
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  staticDirs: ['../src/lib/msw'],
  // webpack workaround see https://github.com/mswjs/msw-storybook-addon/issues/131#issuecomment-1887930180
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'msw/native': require.resolve(
          path.resolve(__dirname, '../../../node_modules/msw/lib/native/index.mjs')
        )
      };
    }
    return config;
  }
};

"msw": "2.1.3",
"msw-storybook-addon": "2.0.0-beta.0",

[henrybravos]

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")
      ),
    },
  },
});

[yannbf]

Hey everyone! If you're using MSW 2.0.0, we just released a new beta version that should have fixed this issue: [email protected].

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!

[bmulholland]

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]

Confirmed that the beta solves this issue for me 🎉

[magus]

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

[chapmanio]

I've followed the vite-specific instructions here but I'm now getting this error:

[ERROR] No known conditions for "./node" specifier in "msw" package [plugin vite:dep-pre-bundle]

Is anyone having anything similar?

viteFinal: (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        ["msw/native"]: require.resolve("../node_modules/msw/lib/native/index.mjs"),
      },
    };

    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    });
  },

    "msw": "^2.1.6",
    "msw-storybook-addon": "^2.0.0-beta.1",

[aronchick]

@chapmanio i solved that because you're using "msw/node" in something that is client code only. You may need to swap to "msw/browser" (but this will prevent you from using server libraries like fs or path).

[chapmanio]

@chapmanio i solved that because you're using "msw/node" in something that is client code only. You may need to swap to "msw/browser" (but this will prevent you from using server libraries like fs or path).

Do you have a code example of how to do that? I'm not importing MSW in my code (I assume that is being done by msw-storybook-addon) so it's not clear how to change this.

[glodynator]

I've followed the vite-specific instructions here but I'm now getting this error:

[ERROR] No known conditions for "./node" specifier in "msw" package [plugin vite:dep-pre-bundle]

Is anyone having anything similar?

viteFinal: (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        ["msw/native"]: require.resolve("../node_modules/msw/lib/native/index.mjs"),
      },
    };

    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    });
  },

    "msw": "^2.1.6",
    "msw-storybook-addon": "^2.0.0-beta.1",

I'm having the same issue.

[acc-nicholas]

I'm having a similar issue: [vite] Internal server error: No known conditions for "./node" specifier in "msw" package

This works:

import { handlers } from "../mocks/handlers";

// Initialize MSW
initialize(
  {
    onUnhandledRequest: "warn",
  },
  [...handlers],
);

This does not work when importing from another lib in my monorepo.

import { handlers } from "@otherlib/mocks";

// Initialize MSW
initialize(
  {
    onUnhandledRequest: "warn",
  },
  [...handlers],
);

I have proper vite/typescript aliases/paths set up for this mocks lib btw.

"msw": "^2.2.1",
"msw-storybook-addon": "^2.0.0-beta.1",

[towry]

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"

[yannbf]

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!

[rjaguilar]

I'm still getting this issue

[vite] Internal server error: No known conditions for "./node" specifier in "msw" package

"msw-storybook-addon": "2.0.3",
"msw": "2.4.3"

even while following

// .storybook/preview.js
-import { initialize, mswDecorator } from 'msw-storybook-addon'
+import { initialize, mswLoader } from 'msw-storybook-addon'

initialize()

const preview = {
-  decorators: [mswDecorator]
+  loaders: [mswLoader]
}

export default preview

what is the solution for this ?

[yannbf]

I'm still getting this issue

[vite] Internal server error: No known conditions for "./node" specifier in "msw" package

"msw-storybook-addon": "2.0.3", "msw": "2.4.3"

even while following

// .storybook/preview.js
-import { initialize, mswDecorator } from 'msw-storybook-addon'
+import { initialize, mswLoader } from 'msw-storybook-addon'

initialize()

const preview = {
-  decorators: [mswDecorator]
+  loaders: [mswLoader]
}

export default preview

what is the solution for this ?

That's quite odd! Could this be your node version? Could you check whether you have multiple MSW versions installed in your project? e.g. yarn why msw