Idiomatic example with Next.js & TypeScript

[nirtamir2]

Hi
I'm trying to integrate msw with Next.js and TypeScript.
I notice that the official next.js example is written with JavaScript.

https://github.com/vercel/next.js/tree/canary/examples/with-msw

I try to do something like #1227 (comment) for TypeScript.
I want to use import instead of require (because I want to prepare for modern ESM in the future).
The mocks script should load before the _app component exports. But the mocks script is async because of the dynamic imports.

I wanted to do something like:

_app.tsx

import { AppProps } from "next/app";

void (async function initMocks() {
  if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
    await import(/* webpackChunkName: "msw-mocks" */ "../mocks");
  }
})();

export default function App({ Component, pageProps }: AppProps) {
  return (
        <Component {...pageProps} />
  );
}

and mocks/index.ts

async function initMocks() {
  if (typeof window === "undefined") {
    const { server } = await import(
      /* webpackChunkName: "msw-server" */
      "./server"
    );
    server.listen();
  } else {
    const { worker } = await import(
      /* webpackChunkName: "msw-browser" */
      "./browser"
    );
    await worker.start();
  }
}

void initMocks()

export {}

When I try i - I get those MSW chunks in the bundle too (splitted to chunks)

The request from the server (getServerSideProps) works well - but the request from the client-side (useEffect + fetch inside a component for example) did not work until I change something to trigger HMR. I suspect that the problem was that the msw loded after the _app component initialized. How can we defer its loading until msw finish initializing in an idiomatic way?

Currently what I end up with is _app.tsx

import { AppProps } from "next/app";

if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
  require("../mocks");
}

export default function App({ Component, pageProps }: AppProps) {
  return (
        <Component {...pageProps} />
  );
}

and mocks/index.ts

if (typeof window === "undefined") {
module,@typescript-eslint/no-unsafe-assignment
  const { server } = require("./server");
  server.listen();
} else {
module,@typescript-eslint/no-unsafe-assignment
  const { worker } = require("./browser");
  worker.start();
}

export {};

And it works well (without adding msw to the bundle)
Is it the idiomatic way to do it with Next.js and TypeScript?
How can I use imports instead of require?

Thanks!

[kettanaito]

Hey, @nirtamir2.

I believe your question is related to how to include MSW conditionally with import statements. I don't think you can, as modern bundlers extract those statements at build time. I'm not aware if conditional imports are possible, so you will get anything you import that way in your bundle regardless if there's a condition before the import that'd prevent it.

That's the main reason we recommend using require, as dependencies included that way are not statically analyzable. You can annotate the imported objects in TypeScript to keep type safety:

// Note that unconditional type imports are fine.
import type { SetupWorkerApi } from 'msw'
import type { SetupServerApi } from 'msw/node'

// ...your conditions
const server: SetupServerApi = require('./server').server

// ..and then a similar thing for the worker
const worker: SetupWorkerApi = require('./worker').worker

Otherwise, there isn't much I can recommend. import and require, apart from being syntactically different, also differ in how they load modules. You may customize your bundler to support dynamic imports but I don't think you can with Next.js and I don't think you should, generally speaking.

[kettanaito]

For general recommendations on type-safe usage of MSW I recommend this article.

[nirtamir2]

Great! Thank you for your detailed answer 💯