Comments (10)
Update: vercel/next.js#10509 (comment)
from site.
Nice! Awesome to hear!
I think we should be able to get mirage released and the website updated with the nextjs example this week.
from site.
This would be great! Just spitballing: if you avoid SSR for pages it seems like Mirage could be initiated in _app.js
and you'd be good to go.
from site.
I've attempted that but haven't been able to get it to work, perhaps because of the nextjs fetch polyfill? It's not really clear why Pretender isn't picking up on the requests.
Repo: https://github.com/GriffinSauce/nextjs-mirage-example
@timneutkens any chance you or a team member could take a look at this?
from site.
Thanks @GriffinSauce !
I just gave it a shot and think you're right about it having to do with the polyfill. The way that we (pretender) intercept fetch requests is by installing the whatwg-fetch polyfill, which changes window.fetch to use XMLHttpRequest, and then we rely on pretender to pickup those outgoing XMLHttpRequests.
It looks like in next we can't rely on whatwg-fetch, since it's getting replaced by another polyfill? I'm not too knowledgable about next, so correct me if I'm wrong here.
We'll need to investigate more, and probably come up with another way to catch these fetch requests in a next friendly way.
from site.
I've done a little digging. Seems like next.js already polyfills with whatwg:
Imported here:
And loaded here:
They make a specific effort to load this before anything else. Perhaps customising the webpack config to alias the modules could work but that greatly diminishes the DX and maintainability.
Didn't have time to try anything else yet, but it looks pretty tricky. :(
from site.
Just to let you know, I just patched in the new pretender version (in my example) via yarn resolution and it works!
I see you already have a PR here so I didn't make one. :)
miragejs/miragejs#361
Thank for the effort!
from site.
Even I am trying to add MirageJs to Next app and I am finding it difficult. If we can run miragejs as a seperate server then I think it will work fine @samselikoff
from site.
Can finally close this βΒ all the changes have been made so Mirage works w/Next.js for client-side API requests out of the box!
https://miragejs.com/quickstarts/nextjs/develop-a-page/
from site.
π Thanks Sam!
from site.
Related Issues (20)
- Passthrough overview: include fully qualified domain name HOT 4
- Persistent URLs in REPL HOT 2
- Add example / quickstart for VueX HOT 1
- Add example of modularizing routes HOT 1
- Change `overflow-y` from `scroll` to `auto` to hide the nav scrollbar when not needed HOT 4
- Code for if we need to downgrade react-spring to v8 HOT 1
- Add instructions on using UMD build to Installation page HOT 3
- Add search
- Add GraphQL guides + examples to the site HOT 24
- Add websocket example somewhere
- Sidebar scrolling has a bug HOT 1
- REPL Todos HOT 1
- REPL request input moves caret to end HOT 1
- Mirage REPL window jumps to top when typing below viewport HOT 1
- Deps warning should fail build.
- Code mode for REPL that let's you run code against your mirage server.
- Snippet on homepage has an error
- REPL - Database tab has error with polymorphic relationships
- Schema methods in Getting Started/Overview (Typescript) HOT 1
- REPL: Support Template strings in Request body HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from site.