Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fast refresh does not work correctly with MDX

See original GitHub issue

Bug report

Describe the bug

Instead of just replacing the contents, fast refresh performs a full page reload if it is an .mdx file.

To Reproduce

git clone https://github.com/michel-kraemer/test-nextjs-fast-reload-mdx.git
cd test-nextjs-fast-reload-mdx
npm i
npm run dev
Open http://localhost:3000 in your web browser
You should see Hello World!
Change the file pages/index.mdx
The full page will be refreshed!!
Open http://localhost:3000/test in your web browser
Change the file pages/test.jsx
The text will be updated without a full page reload

Expected behavior

Instead of reloading the full page, only the contents should be updated.

Screenshots

–

System information

OS: macOS
Browser: chrome
Version of Next.js: 9.4.4
Version of Node.js: 14.3.0

Additional context

This has worked correctly in Next.js 9.3.x with HMR.
The issue can be reproduced, no matter if the .mdx file imports/exports a Layout or not.

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:11 (7 by maintainers)

Top GitHub Comments

3reactions

Timercommented, Aug 5, 2020

Fixed in next@^9.5.2-canary.6 or newer.

2reactions

remorsescommented, Jun 5, 2020

MDX is not the problem, I managed to get fast refresh working

Fast refresh gets disabled when the page file exports non react stuff (constants, objects, ) that gets consumed in other react files, so make sure you don’t export variables from MDX

Also make sure that your main App component is a named function (should not be export default () => { ... })

If you want to try out fast refresh with MDX files try out Dokz

Top Results From Across the Web

Fast refresh not working properly with MDX #34212 - GitHub

Whenever I make a modification to the MDX file, I would expect auto-refresh to kick in and Chrome to display my modification. In...

Gatsby Hot Reload not working with MDX - Rysolv

Putting your MDX files outside of src/pages and then sourcing it via a page query will work because then Fast Refresh has your...

Add Fast Refresh Support to our MDX Files with Nx Support ...

Whenever you change some Next.js component it automatically refreshes the page without hard reloading everything. However, you might notice that whenever we ...

Hot Reload MDX changes in Next.js and Nx

Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer ... at the lower right corner of the open...

Basic Features: Fast Refresh - Next.js

Next.js' Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components.