I've been coming back to this video every-time I set up MSW in a new project, and I'm happy it's still getting views & likes... and surprised there's no comments! Everyone's stunned into silence 😄 I have gotten comments in person and elsewhere though, here's what MSW themselves said via Twitter: > A hands-down fantastic overview of MSW integration in a Next.js app! Learn how to set up mocks, enable them for browser demos *and* for your integration tests. All sharing the same network scenarios. 👏 I post this not just to praise myself (good job, me!), but to kick off discussion! I enjoy going through comments, they often spark ideas for new videos, and how to improve! 👂
Hello! I have a doubt about the Next 14 and MSW. I'm trying to install it and as probatelly you know, by default, all components in Next 14 is SSR, except when we declare "use client". So, following this tutorial I realised than the bcan er mode doesn't work. My intension is run MSW not for unit tests only, but mock data for development as well. I force to use just server mode, but what we can do when "use client" is needed?
Thanks for a great tutorial. Works great with getServerSideProps but not with getInitialProps. Looks like MSW does not capture any server side request :/ Have you faced same issue?
Thanks for watching, my pleasure! I do usually unit-test those contracts (so I'd unit test the method my NextJS api endpoint is calling to hit the actual backend, hijacking the requests with node MSW), but I think you'd also be able to do it if you setup MSW to passthrough all the `/api` requests, but still have it hijack the calls to the actual backend. mswjs.io/docs/api/request/passthrough
Hi Johnny, thanks for great video For me I'm getting imports error such as ./browser & ./node is not exported from msw, please help, using latest node and msw package
Hello Rahul, thanks for watching this one! It's about 2 years old but the general ideas should be the same, so I do suggest trying to follow along! I'm not doing `./browser` or `./node` anywhere here! I guess you're trying to mix in the instructions from the official docs? mswjs.io/docs/integrations/browser & mswjs.io/docs/integrations/node? Those two imports you're having trouble with are relative imports, so *you* need to create those files. They have them in those pages. What I'm doing is a bit different, but not really. It starts around 1:26 in the video, again I suggest following along from there. Instead of a `node.ts` file I'm making an `mswServer.ts` file, and instead of a `browser.ts` file I'm making an `mswWorker.ts`. You can still call them the same as they do, or whatever you'd like. I just thought it makes it a bit clearer what they're exporting. The only change in the code inside them between what I did in the video and the repo I'm sharing, and their docs is: that you `import { setupServer } from 'msw/node'` & `import {setupWorker} from 'msw/browser'`. In the video and in my repo you could just import them `from 'msw'`: github.com/jmagrippis/eri/tree/main/src/mocks The important thing for stuff like Next.js is what I show next: I'm essentially combining those two files in just one, so we can dynamically start "the correct MSW", depending on whether we're on the browser or node. We need that for Next.js, as it can run on either! So, my `src/mocks/index.ts` is the only place where I import either `./mswWorker` (`./browser` if you followed the docs instead of me), or `./mswServer` (`./node` if you followed the docs instead of me): github.com/jmagrippis/eri/blob/main/src/mocks/index.ts From then on, I only import that one new index file, both for hijacking the Next.js requests and for the Jest tests. Hope this helps, do let me know!
@@jmagrippis Hi Johnny, I have followed only your video (not the official docs) and I am getting these errors too: I wonder if something has changed in a recent update of either Next or msw? I've actually spent a few days trying to find a workaround with no luck: I'd really love to join the others in saying that this video has saved the day: what could me and Rahul be missing? (Maybe Rahul found a fix?)
Hey Max! Sorry to hear your troubles, I ALSO spent a couple days just now revisiting this (trying to make MSW work with SvelteKit which works, and Next.js which doesn't)! Eventually I found these to issues I'm now subscribed to: github.com/mswjs/msw/issues/1877 This is "our" problem with the `./browser` import. The inline script approach suggested in the end is fine, so in your root layout you can have a dedicated `setupWorker.js` script that you only add if you want to run your mock server (you can do a ternary like `process.env.PUBLIC_API_MOCKING_ENABLED` ? : null`). *However*, I don't like this. The way I use Next.js now is with a lot of server actions. I don't do client-side fetches anymore, and if I do they are against "internal" endpoints like `/api/contact` which I wouldn't want to mock. I would pass these through, and then it's on the server-side where I'd want to mock the external request to SendGrid or wherever. So I'd just drop the worker / `mswWorker` / `mswBrowser`, and never do client-side mocking. I'd just spin up the `mswServer` / `mswNode`. So I should be able to do that in Next.js middleware, right? I thought so but I was wrong, unfortunately that's not the case, because there's also this even bigger issue: github.com/mswjs/msw/issues/1644 & this discussion: github.com/vercel/next.js/discussions/56446 Essentially, the way Next.js patches fetch on the server, it doesn't let MSW do its interceptions. So, sorry to say after so long, but I'm just subscribed to those issues and that discussion and crossing my fingers 😬🤞
Hello, very useful video. I'm using msw in next.js app. it works perfectly when I make changes to mocked responses when I make api call in client component. And when I mock the response and change it, in server component. I have to re--run npm run dev, to see changes reflected. Is this normal? Or I'm missing something?
Hey Raul! It’s Magnet on the Mac App Store 🙂 the only shortcuts I use are for “full screen”, and “half screen left” or “half screen right”, but that’s all I need really, I’m happy with it 😄 Do note I also use the native full screen / desktops thing quite a lot, I three finger swipe between them often! Thanks for watching and this question 🙌
