Breaks on building Storybook about msw-storybook-addon HOT 18 OPEN

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!

from msw-storybook-addon.

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

from msw-storybook-addon.

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

from msw-storybook-addon.

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

from msw-storybook-addon.

I am facing the same issue

from msw-storybook-addon.

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

from msw-storybook-addon.

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

from msw-storybook-addon.

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",

from msw-storybook-addon.

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

from msw-storybook-addon.

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.

from msw-storybook-addon.

Confirmed that the beta solves this issue for me 🎉

from msw-storybook-addon.

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",

from msw-storybook-addon.

@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).

from msw-storybook-addon.

@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.

from msw-storybook-addon.

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.

from msw-storybook-addon.

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",

from msw-storybook-addon.