How to use with Remix?

[massimopalmieri]

Hi all,

is there a recommended way to user msw with remix?
I'd like to use msw to mock third party apis, and I tried to follow the instructions for Nextjs, but I can't manage to make it work

[kettanaito]

Hey, @massimopalmieri.

Integrating MSW into a Remix application can be achieved by following the default Getting started tutorial from our documentation. Specific setups like the one for NextJS will always feature steps required by those particular frameworks. I don't recommend looking at those.

[samuelmburu]

Hi @kettanaito, I'm running

"@remix-run/node": "^2.3.1",
"@remix-run/react": "^2.3.1",
"@remix-run/serve": "^2.3.1",
"msw": "^2.0.11",

on node@20.9.0

I've updated all packages to the latest versions, I copied and pasted the handlers and node files from the msw getting started page and get the following error:

My package.json file with the overrides section to get msw working with typescript 5.x

I'm not sure what I'm doing wrong - any help would be great!

[samuelmburu]

welp..i was doing not smart things -- leaving this here so someone else can possibly find it useful

found this: https://stackoverflow.com/questions/76690852/msw-and-remix-globalthis-xmlhttprequest-is-not-a-constructor

that led me to this: https://github.com/mswjs/examples-new/tree/4035459a12f32072d6b31e75572efb6cf3c056dd/examples/with-remix

[massimopalmieri]

thanks @kettanaito
I managed to integrate it using msw/node as using service worker wouldn't work with the first page load, which makes requests server side

[kettanaito]

Yeah, make sure to use msw/node and setupServer when intercepting requests in Node.js.

[massimopalmieri]

It works as expected unless I enable Remix Auth and the Google Oauth2 strategy, in which case I get this error when being redirected from https://accounts.google.com to localhost

TypeError: Cannot read property 'content-encoding' of undefined
    at /Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/utils/getIncomingMessageBody.ts:20:23
    at new Promise (<anonymous>)
    at Object.getIncomingMessageBody (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/utils/getIncomingMessageBody.ts:11:10)
    at NodeClientRequest.<anonymous> (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/NodeClientRequest.ts:189:34)
    at step (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:48:23)
    at Object.next (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:29:53)
    at /Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:23:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/NodeClientRequest.js:19:12)
    at NodeClientRequest.<anonymous> (/Users/massimo/Code/msw-remix/node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/NodeClientRequest.ts:188:68)

I thought it was a bug with the Remix Auth Strategy, but I tried 2 different strategies, https://github.com/pbteja1998/remix-auth-google and https://github.com/TheRealFlyingCoder/remix-auth-socials, and I get the same issue.

I'm trying to investigate the issue, let me know if it would be useful to push a repo to reproduce it

[kettanaito]

This looks like an issue that's been reported recently. The fix is ready and should be released soon. You should retry your setup with the next version of MSW once it's out.

[massimopalmieri]

thanks @kettanaito!

[kettanaito]

Please note that as of December 2023, we have an official Remix + MSW usage example. This is the recommended way to use MSW with Remix. Please refer to that example. Thanks.