How to use with Remix? #1133

massimopalmieri · 2022-02-28T09:41:41Z

massimopalmieri
Feb 28, 2022

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

Answered by kettanaito

Dec 19, 2023

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.

View full answer

kettanaito · 2022-03-01T01:09:28Z

kettanaito
Mar 1, 2022
Maintainer

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.

2 replies

samuelmburu Dec 18, 2023

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 [email protected]

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 Dec 18, 2023

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 · 2022-03-01T11:30:10Z

massimopalmieri
Mar 1, 2022
Author

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

4 replies

kettanaito Mar 1, 2022
Maintainer

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

massimopalmieri Mar 1, 2022
Author

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 Mar 2, 2022
Maintainer

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 Mar 2, 2022
Author

thanks @kettanaito!

kettanaito · 2023-12-19T09:35:05Z

kettanaito
Dec 19, 2023
Maintainer

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.

6 replies

kettanaito Jun 25, 2024
Maintainer

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 Jun 25, 2024
Maintainer

Opened an issue about this: mswjs/examples#117

imaitland Jul 30, 2024

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 Sep 24, 2024

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/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:25)
    at n (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:646)
    at o (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:45978:1297)
    at resolveExportsOrImports (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46599:18)
    at resolveDeepImport (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46622:25)
    at tryNodeResolve (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:46387:16)
    at ResolveIdContext.resolveId (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/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/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:48951:22)
    at async TransformPluginContext.resolve (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:49112:15)
    at async normalizeUrl (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:63976:26)
    at async file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/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/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:64042:7)
    at async PluginContainer.transform (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:49033:18)
    at async loadAndTransform (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-DyBnyoVI.js:51866:27)
    at async fetchModule (file:///project-path/node_modules/.pnpm/[email protected]_@[email protected]/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 Dec 17, 2024

Same problem here

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use with Remix? #1133

{{title}}

Replies: 3 comments 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to use with Remix? #1133

massimopalmieri Feb 28, 2022

Replies: 3 comments · 12 replies

kettanaito Mar 1, 2022 Maintainer

samuelmburu Dec 18, 2023

samuelmburu Dec 18, 2023

massimopalmieri Mar 1, 2022 Author

kettanaito Mar 1, 2022 Maintainer

massimopalmieri Mar 1, 2022 Author

kettanaito Mar 2, 2022 Maintainer

massimopalmieri Mar 2, 2022 Author

kettanaito Dec 19, 2023 Maintainer

kettanaito Jun 25, 2024 Maintainer

kettanaito Jun 25, 2024 Maintainer

imaitland Jul 30, 2024

paulomenezes Sep 24, 2024

theocerutti Dec 17, 2024

massimopalmieri
Feb 28, 2022

Replies: 3 comments 12 replies

kettanaito
Mar 1, 2022
Maintainer

massimopalmieri
Mar 1, 2022
Author

kettanaito Mar 1, 2022
Maintainer

massimopalmieri Mar 1, 2022
Author

kettanaito Mar 2, 2022
Maintainer

massimopalmieri Mar 2, 2022
Author

kettanaito
Dec 19, 2023
Maintainer

kettanaito Jun 25, 2024
Maintainer

kettanaito Jun 25, 2024
Maintainer