Handlers not properly registering with Next.js when using faker v6 or 7
dustinsgoodman opened this issue · comments
Issue
When using faker-js v6 or v7 with msw and mswjs/data, the server fails to initiate the worker. It appears as though the the handlers are getting corrupted somehow. I've been able to recreate the issue in this Stackblitz for your review: https://stackblitz.com/edit/nextjs-bfqzrz?file=package.json
This is what you should see on load:
I went with the bare minimum reproduction and used mostly example code from https://github.com/vercel/next.js/tree/canary/examples/with-msw as the base.
Libraries used:
- nextjs v12.1
- @faker-js/faker 7.3.0 and 6.3.1 (I tried both!)
- @mswjs/data 0.10.1
- msw 0.42.3
Hey, @dustinsgoodman. Thanks for reporting this.
This issue is a duplicate of:
If you follow the answer to that discussion you will get this issue resolved.
Hey @kettanaito - I don't think this is a duplicate and is rather an issue with integration with faker itself. When I comment out faker in https://stackblitz.com/edit/nextjs-bfqzrz?file=mocks/db.js, the server error changes and the handlers are actually able to register. Stackblitz has issues with the worker registration but you can see the error completely changes from the one described in mswjs/msw#1236.
Also noting that I have msw working perfectly fine on my side project using next.js where I found this issue so it's only an issue when I start introducing the data module with faker .
Have you tried following the proposed answer in that discussion while using Faker?
I don't argue that Faker may affect things, like being shipped in an ESM or something, which automagically flips how webpack resolves modules under the hood, but the error message on the screenshot above is very likely about the conditional imports.
I hadn't quite followed you and you meant to go to mswjs/msw#1227 (comment) 🤦 - that worked perfectly. I'll go open up a quick PR to update https://github.com/vercel/next.js/blob/canary/examples/with-msw/mocks/index.js because that would save people lots of headaches.
@kettanaito got it fixed upstream in next.js 😄 vercel/next.js#38050
That is simply fantastic, @dustinsgoodman! Thank you for fixing that.