Has anyone managed to get mirage to work with Next.js 13.4?

[dtabaka]

Hi, I had it working fine using the page based routing but upgraded to 13.4 and to the app based routing using a route.js file in the /app /api folder and it doesn't seem to recognized the mirage server. Just getting 404 errors now in my fetch. Thanks

My work around is just returning hard-coded JSON from the NextJs route.ts/js file using the NextResponse.json method.

[WilliamZimmermann]

I have exactly the same issue and I'm trying to figure out about how to solve it. I'm not able to use Next Link or App Router because it looks that "Mirage" intercepts it.

However, I discover that, if I comment server.passthrought() from my mirage settings, it will works (links will work), but it will also display an error on browser inspector saying: "ailed to fetch RSC payload. Falling back to browser navigation.".

[SkoebaSteve]

Are you telling the Next server to run it on the client side?

Without it, createServer() will be executed on the server and won't intercept your network requests.

[maorazoulay]

Here is the only solution (workaround) that worked for me:

1. create a mirage.js file [https://miragejs.com/quickstarts/nextjs/develop-an-app/#step-2-define-your-shared-server](like this) with an async method that contains createServer() and returns the server. I created it at the root of my project.
2. within the app folder, create a component and from a useEffect within that component call the makeServer method from mirage.js.
3. In your root layout, Render that component as part of your html and then you are all set. No more 404s.

[SkoebaSteve]

@maorazoulay If I might suggest a possible simpler solution? You could be to rely on 'use client' as per the link I gave and create a React component you can just import:

'use client'
import { createServer } from "mirage";

createServer();

export default function MirageServer(): null { return null }

This worked for me.

[poulet42]

Regardless of the solution used to setup mirage on the client side, this won't fix navigation unfortunately...
Clicking a next link / using useRouter methods will either

• throw Failed to fetch RSC payload ... with no passthrough
• throw an obscure react-dom error TypeError: Cannot read properties of undefined (reading 'getReader') with passtrough on (similar issue here it seems?)

🥲

[luizjoliver]

The error TypeError: Cannot read properties of undefined (reading 'getReader') is still ocurring when using this.passthrough() configuration on createrServer > routes > this.passthrough() , what i have done is delete this.passthrough() because with that your navigation is going to work just fine , but i still do no what to do about next js route-handlers because without this.passthrough() in the code this make a beetwen mirage js and next Js using App router (Next 13 or Above)

[nascjoao]

@maorazoulay If I might suggest a possible simpler solution? You could be to rely on 'use client' as per the link I gave and create a React component you can just import:

'use client'
import { createServer } from "mirage";

createServer();

export default function MirageServer(): null { return null }

This worked for me.

Used this approach for a while but noticed it refreshes the entire application on every route change. E.g. a context will lose all data by navigating to other page.

[dlicheva]

To fix the error TypeError: Cannot read properties of undefined (reading 'getReader') , I added a slash to the namespace call, e.g. this.namespace = '/api'.