Support for MSW 2.0.0

[csantos1113]

Hey guys, I noticed mswjs/msw#1464 (mswjs/msw#1436) is hopefully getting released this month 🤞, and I'm wondering if there is any work in progress to get msw-storybook-addon working with it?

Thanks

[yannbf]

Edit: Please use yarn add msw-storybook-addon@2.0.0-beta.1!

---

Hey everyone! I started the changes in #122, and there's a canary release ready for you to try:

npm install msw-storybook-addon@2.0.0--canary.122.b3ed3b1.0
# or 
yarn add msw-storybook-addon@2.0.0--canary.122.b3ed3b1.0

It might take some time to promote it to latest (and therefore release a breaking change), so please use the canary and let me know how it goes!

[CHE1RON]

Working great so far, thanks @yannbf!

[g-farrow]

this has been working well for me too @yannbf - been using it for a few weeks now

[GeorgeWL]

been using the canarary for a little bit now and haven't noticed any issues so far 👍

[szykov]

any plans when it goes stable? thanks.

[ShaunEvening]

Hey @szykov 👋

We're just getting back from holidays. I'll talk to Yann about getting this merged over the next week or so.

Stay tuned 📻

[yannbf]

Hey everyone! Unfortunately there are still a few things to sort out before the addon releases breaking changes (v2.0.0) to latest.
We just released a beta, so please keep using the beta for the time being and we'll reach out once the final version is out!

yarn add msw-storybook-addon@beta

or

yarn add msw-storybook-addon@2.0.0-beta.1

[bmulholland]

FYI, I tried to upgrade from the canary to the beta and hit #131. Canary works fine.

[CHE1RON]

Same here. Canary works, although I receive warnings about requests "without a matching request handler":

[mocaffy]

@CHE1RON
You can hide that warning by setting onUnhandledRequest: 'bypass' in InitializeOptions.

import { initialize } from 'msw-storybook-addon'

initialize({
  onUnhandledRequest: 'bypass'
})

https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#configuring-msw

see also:
https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest

[CHE1RON]

That's EXACTLY what I needed, thank you very much! 🥇

[chiptus]

@csantos1113 any chance to release a new beta?

[csantos1113]

@csantos1113 any chance to release a new beta?

@chiptus - I can't answer that because I'm not a maintainer of this package 😅

[yannbf]

Hey everyone! We just released a new beta version that should be improved and also not display such warnings anymore msw-storybook-addon@2.0.0-beta.1

@CHE1RON @mocaffy you won't need that workaround anymore.
@bmulholland the issue has been resolved!

[bmulholland]

It works! Thank you!!

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.

I set my version pin to just "beta", so I'll get future beta upgrades.

[SalahAdDin]

This addon in its next version does not support MSW 2.0:

<i> [webpack-dev-middleware] wait until bundle finished
ERROR in ./node_modules/.pnpm/msw-storybook-addon@2.0.0-next.1_msw@2.1.5/node_modules/msw-storybook-addon/dist/index.mjs 19:34-52
Module not found: Error: Package path ./node is not exported from package /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/msw-storybook-addon@2.0.0-next.1_msw@2.1.5/node_modules/msw (see exports field in /home/luisalaguna/Projects/TRT/twe_fe_next/node_modules/.pnpm/msw-storybook-addon@2.0.0-next.1_msw@2.1.5/node_modules/msw/package.json)
 @ ./.storybook/preview.ts 3:0-60 75:0-10 80:8-17
 @ ./storybook-config-entry.js 11:2686-2761 32:2-35:4 32:2663-35:3

preview compiled with 1 error
WARN export 'rest' (imported as 'rest') was not found in 'msw' (possible exports: GraphQLHandler, HttpHandler, HttpMethods, HttpResponse, MAX_SERVER_RESPONSE_TIME, MIN_SERVER_RESPONSE_TIME, NODE_SERVER_RESPONSE_TIME, RequestHandler, SET_TIMEOUT_MAX_ALLOWED_INT, SetupApi, bypass, cleanUrl, delay, getResponse, graphql, handleRequest, http, matchRequestUrl, passthrough)
WARN export 'rest' (imported as 'rest') was not found in 'msw' (possible exports: GraphQLHandler, HttpHandler, HttpMethods, HttpResponse, MAX_SERVER_RESPONSE_TIME, MIN_SERVER_RESPONSE_TIME, NODE_SERVER_RESPONSE_TIME, RequestHandler, SET_TIMEOUT_MAX_ALLOWED_INT, SetupApi, bypass, cleanUrl, delay, getResponse, graphql, handleRequest, http, matchRequestUrl, passthrough)
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/.pnpm/@storybook+builder-webpack5@8.0.0-alpha.16_esbuild@0.18.20_typescript@5.3.3/node_modules/@storybook/builder-webpack5/dist/index.js:1:8087)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/.pnpm/@storybook+builder-webpack5@8.0.0-alpha.16_esbuild@0.18.20_typescript@5.3.3/node_modules/@storybook/builder-webpack5/dist/index.js:1:10082)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✖ Would you like to help improve Storybook by sending anonymous crash reports? … yes
 ELIFECYCLE  Command failed with exit code 1.
    ~/Projects/TRT/twe_fe_next    main ⇡1 +4 !5 ?5  pnpm add msw-storybook-addon && pnpm add -D msw-storybook-addon@canary                                     1 ✘  50s   20.11.0  
Already up to date
Progress: resolved 1621, reused 1537, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ msw-storybook-addon 2.0.0-next.1
  └── ✕ unmet peer msw@">=0.35.0 <2.0.0": found 2.1.5

Done in 14.6s
Packages: +1 -1
+-
Progress: resolved 1621, reused 1536, downloaded 1, added 1, done

devDependencies:
- msw-storybook-addon 2.0.0-next.1
+ msw-storybook-addon 2.0.0--canary.122.0f49e5c.0

Done in 15.4s
    ~/Projects/TRT/twe_fe_next    main ⇡1 +4 !5 ?5  pnpm storybook                                                                                               ✔  31s   20.11.0  

> global-web-fe@0.1.0 storybook /home/luisalaguna/Projects/TRT/twe_fe_next
> storybook dev -p 6006

It's canary version works fine.

[bmulholland]

@SalahAdDin Yes, don't use next, use beta. See my comment right above yours. #121 (comment)

[adnan-sheikh]

Hey everyone! We just released a new beta version that should be improved and also not display such warnings anymore msw-storybook-addon@2.0.0-beta.1

@CHE1RON @mocaffy you won't need that workaround anymore. @bmulholland the issue has been resolved!

mocks are not working for me in this beta version. it's working fine in canary version though.

[CHE1RON]

@adnan-sheikh Can you provide any sample code? It's working fine for me, so I'm curious what might not work on your end 😉

[aaronadamsCA]

Conditional exports still need adjusting. I am importing from v2.0.0-beta.1 in a TypeScript environment and getting this error:

Cannot find module 'msw-storybook-addon' or its corresponding type declarations. ts(2307)

And yet the package works completely fine when I run Storybook. TypeScript just can't see it at all.

Looking at node_modules/msw-storybook-addon/package.json, I see this:

  "main": "./dist/index.browser.js",
  "types": "./dist/index.browser.d.ts",
  "exports": {
    "browser": {
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "react-native": {
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    },
    "node": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    }
  },

I think TypeScript will only look inside a "types" or "default" condition (unless you specify customConditions in your tsconfig.json). It won't go looking inside "browser" or "node" to find "types".

Node.js docs have this to say on the subject:

When using environment branches, always include a "default" condition where possible. Providing a "default" condition ensures that any unknown JS environments are able to use this universal implementation, which helps avoid these JS environments from having to pretend to be existing environments in order to support packages with conditional exports. For this reason, using "node" and "default" condition branches is usually preferable to using "node" and "browser" condition branches.

Given this, the simplest solution is to add a "default" condition at the end that points to the browser bundle:

"default" - the generic fallback that always matches. Can be a CommonJS or ES module file. This condition should always come last.

A possibly better option would be to align with MSW v2's package.json and do this instead:

  "exports": {
    "./browser": {
      "node": null,
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "./node": {
      "browser": null,
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    },
    "./native": {
      "browser": null,
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    }
  },

This would mean users would import from a subpath, just like MSW itself; but this is a major release, and it could be a nice bit of API parity with the base library.

[gsanta]

The stories seem to be working with the beta version, but it fails to run tests with the error

Invariant Violation: [MSW] Failed to execute setupWorker in a non-browser environment. Consider using setupServer for Node.js environment instead.

I noticed that the old addon contained a mswDecorator.js file which determined wether to load the worker or the server based on the environment (node vs browser), but the beta version has non such things.

What is the recommended way to initialize in preview.tsx that works both in browser and with a test runner like jest?

[gsanta]

Actually what aaronadamsCA suggested worked for me, both for browser environment and for running tests. Could you add that to the beta release?

  "main": "./dist/index.browser.js",
  "types": "./dist/index.browser.d.ts",
  "exports": {
    "browser": {
      "types": "./dist/index.browser.d.ts",
      "default": "./dist/index.browser.js"
    },
    "react-native": {
      "types": "./dist/index.react-native.d.ts",
      "default": "./dist/index.react-native.js"
    },
    "node": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    },
    "default": {
      "types": "./dist/index.node.d.ts",
      "default": "./dist/index.node.js"
    }
  },

[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!

[SalahAdDin]

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!

any migration guide?

[ipanasenko]

It's in the link in the message you've quoted