use webpack alias hack to suppress "msw/browser" imports

Author: kettanaito

examples/with-next/app/mockProvider.tsx

@@ -1,11 +1,11 @@
 'use client'
 import { useEffect, useState } from 'react'
 
-if (typeof window === 'undefined') {
-  throw new Error('Is not this a browser-only module?')
-}
+// if (typeof window === 'undefined') {
+//   throw new Error('Is not this a browser-only module?')
+// }
 
-export async function MockProvider({
+export function MockProvider({
   children,
 }: Readonly<{
   children: React.ReactNode

examples/with-next/app/movieList.tsx

@@ -27,7 +27,9 @@ export function MovieList() {
       }),
     })
       .then((response) => response.json())
-      .then((movies) => setMovies(movies))
+      .then((response) => {
+        setMovies(response.data.movies)
+      })
       .catch(() => setMovies([]))
   }
 
@@ -37,7 +39,7 @@ export function MovieList() {
       {movies.length > 0 ? (
         <ul>
           {movies.map((movie) => (
-            <li id={movie.id}>{movie.title}</li>
+            <li key={movie.id}>{movie.title}</li>
           ))}
         </ul>
       ) : null}

examples/with-next/mocks/handlers.ts

@@ -4,7 +4,7 @@ import type { User } from '../app/page'
 export const handlers = [
   http.get<never, never, User>('https://api.example.com/user', () => {
     return HttpResponse.json({
-      firstName: 'John',
+      firstName: 'Kate',
       lastName: 'Maverick',
     })
   }),

examples/with-next/next.config.mjs

@@ -2,7 +2,29 @@
 const nextConfig = {
   experimental: {
     instrumentationHook: true
+  },
+  webpack(config, { isServer }) {
+    /**
+     * @fixme This is completely redundant. webpack should understand
+     * export conditions and don't try to import "msw/browser" code
+     * that's clearly marked as client-side only in the app.
+     */
+    if (isServer) {
+      if (Array.isArray(config.resolve.alias)) {
+        config.resolve.alias.push({ name: "msw/browser", alias: false })
+      } else {
+        config.resolve.alias["msw/browser"] = false
+      }
+    } else {
+      if (Array.isArray(config.resolve.alias)) {
+        config.resolve.alias.push({ name: "msw/node", alias: false })
+      } else {
+        config.resolve.alias["msw/node"] = false
+      }
+    }
+
+    return config;
   }
-};
+}
 
 export default nextConfig;