Next.js: Fast refresh does not work correctly with MDX

[michel-kraemer]

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

1. git clone https://github.com/michel-kraemer/test-nextjs-fast-reload-mdx.git
2. cd test-nextjs-fast-reload-mdx
3. npm i
4. npm run dev
5. Open http://localhost:3000 in your web browser
6. You should see Hello World!
7. Change the file pages/index.mdx
8. The full page will be refreshed!!
9. Open http://localhost:3000/test in your web browser
10. Change the file pages/test.jsx
11. 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.

[vishalvijay]

I can confirm this.

I just verified with my project. The page doing full reload on content change in.mdx file.

[remorses]

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

[michel-kraemer]

@remorses Thanks. What you're saying makes sense. But in my case, I don't have any App component and my MDX file does not export variables.

[aulneau]

I can confirm this is happening with using the latest canary versions on multiple mdx based sites.

[remorses]

MDX fast refresh does not work for 9.5.0 but works for 9.4.0 in some cases, i can’t find the reason though

[aulneau]

Correct, I was trying to do some debugging but came up with nothing. I thought at first perhaps it was from using additional rehype / remark plugins, but none of the base mdx examples work with fast refresh. @timneutkens @Timer, curious if this might be a priority anytime soon!?

[Timer]

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

[michel-kraemer]

I can confirm it works with the latest canary. Thanks for the effort!!