Has anyone managed to get mirage to work with Next.js 13.4? about miragejs HOT 8 OPEN

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.".

from miragejs.

@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.

from miragejs.

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.

from miragejs.

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.

from miragejs.

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?)

🥲

from miragejs.

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)

from miragejs.