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.

[kettanaito]

Thanks for letting me know! I need to update that example to use Vite-based Remix.

I think I tried this recently and didn't have any issues. Remix still keeps its entry modules—that's the only thing that matters. If you uncover any Vite-specific things we need to do, please let me know. I'd expect there be none.

[kettanaito]

Opened an issue about this: mswjs/examples#117

[imaitland]

this one works well: https://github.com/mswjs/examples/tree/main/examples/with-remix/app

I'm using Remix "@remix-run/node": "^2.10.2",

[paulomenezes]

I'm trying to run a Hydrogen project, that uses Remix, and it doesn't work:

2:47:49 PM [vite] Pre-transform error: No known conditions for "./node" specifier in "msw" package
Error during module fetch: Error: No known conditions for "./node" specifier in "msw" package
    at e (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:25)
    at n (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:646)
    at o (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:1297)
    at resolveExportsOrImports (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46599:18)
    at resolveDeepImport (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46622:25)
    at tryNodeResolve (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46387:16)
    at ResolveIdContext.resolveId (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46137:19)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async PluginContainer.resolveId (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:48951:22)
    at async TransformPluginContext.resolve (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:49112:15)
    at async normalizeUrl (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:63976:26)
    at async file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:64115:39
    at async Promise.all (index 0)
    at async TransformPluginContext.transform (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:64042:7)
    at async PluginContainer.transform (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:49033:18)
    at async loadAndTransform (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:51866:27)
    at async fetchModule (file:///project-path/node_modules/.pnpm/vite@5.4.6_@types+node@22.5.5/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:54413:16) {
  plugin: 'vite:import-analysis',
  id: '/project-path/app/mocks/node.ts',
  pluginCode: 'import { setupServer } from "msw/node";\n' +
    'import { handlers } from "~/app/mocks/handlers";\n' +
    'export const server = setupServer(...handlers);\n'
}

When I comment server.listen(); from entry.server.tsx, the project works with the browser mocks, but the server doesn't work.

[theocerutti]

Same problem here