Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

msw integration with Next.js project

See original GitHub issue

Describe the bug

Next’s dev server get stuck quickly after a few navigations.

Environment

msw: 0.29.0
nodejs: 12.19.0
npm: 6.14.8
yarn: 1.22.5

Please also provide your browser version. Chrome windows 91.0.4472.77

To Reproduce

Steps to reproduce the behavior: I do have a working demo on my working laptop. but I can’t commit it to my personal GitHub repo due to company policy, I’m very sorry for the inconvience. here is how to reproduce the issue.

create a new Next project use creat-next-app using Typescript template.
complete the official learning course sections of Pre-rendering and Data Fetching and Dynamic Routes. so we have posts route for all blogs list and posts/[id] route for the individual blog.
set up msw follow by this demo
add about page, using static generation with this page by mocking API returning some data to display.
yarn dev start the dev server.
click ‘posts’ link from the index page, when ‘posts’ page loaded click the go back button from browser.
repeat step 6 about 3~4 times.
next dev server get stuck, you can see all the following request stuck in pending status from Network panel of Chrome dev tool

This issue disappeared after I comment out require('../mocks') statement. I also find this issue on next mentioning that old service work would cause problom. but apparently, I can’t remove mockServiceWorker.

Does anyone have the same issue?

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Issue Analytics

State:
Created 2 years ago
Reactions:9
Comments:12 (4 by maintainers)

Top GitHub Comments

6reactions

webprocommented, Jun 20, 2021

See https://github.com/mswjs/msw/issues/785#issuecomment-864542454

tl/dr; bug probably introduced in v0.25.0, downgrade to v0.24.4 may be a temporary work-around.

3reactions

kettanaitocommented, Jul 29, 2021

We’ve recently released a fix that fixed the dev server in NextJS so it doesn’t get stuck (thanks to @takefumi-yoshii).

Could you please update to 0.33.1 and let us know if the issue is gone? Pay attention that you’d have to update the worker script or have the msw.workerDirectory configured.

Top Results From Across the Web

Examples – MSW - Mock Service Worker

Examples below are focused on the integration of Mock Service Worker with specific tools. NextJS.

Writing tests for Next.js, next-auth, Prisma using Playwright ...

Handle Prisma integration. We have a full-blown application with a client and a server-side, authentication is taking place (not just on the ...

Integrate MSW and Storybook - Egghead.io

We configure MSW by hand for use with Next.js features like getServerSideProps and getStaticProps in stories.

Getting started with Mock Service Worker - LogRocket Blog

Next.js layers for interacting with the MSW API. Testing our application using Cypress. We'll write a couple of integration tests using Cypress ...

Mock Service Worker on Twitter: "We are looking for ...

We are looking for contributors experienced with NextJS and Cypress to improve MSW integration with those great technologies. If you're interested, ...