Update the Remix example to Vite-based Remix

[kettanaito]

• Originates from How to use with Remix? msw#1133 (reply in thread)

[paulomenezes]

Hey @kettanaito have you already try msw with Remix and vite? 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.

I also added this comment here, not sure what is easy to track.

[unclejustin]

This also does not work if you have redirects in your app.

example:

import { redirect } from "@remix-run/node";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  await getAuthenticatedData(request);
  return redirect("/home");
};

Throws: Error: Redirects returned/thrown from loaders/actions must have a Location header