Fast refresh not working properly with MDX

[sebastienbarre]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 17.2.0
  npm: 8.1.4
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.0.10
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

v12.0.10 (replicated on v12.0.11-canary.12)

What version of Node.js are you using?

17.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS Monterey

How are you deploying your application?

N/A (reproducible in dev mode)

Describe the Bug

Per suggestion from @ijjk in #31827, I created a simple repo based on a small modification to the official "with MDX" example to demonstrate how "Fast refresh" is not working properly at times, as it and keeps triggering the big, blocking "About to perform a full refresh" warning panel.

The repo is a simple blog example, with one single post in MDX format.

Whenever I make a modification to the MDX file, I would expect auto-refresh to kick in and Chrome to display my modification. In almost all situations (but not always), it displays a big warning instead. While I can click on the "Reload" button, this is definitely creating friction (but an option to disable that big warning panel would be great too).

Expected Behavior

I would expect simple saving the file in my pages/ directory to automatically re-compile and refresh it in Chrome without warning, as opposed to displaying the big panel.

To Reproduce

Here is the repo:
https://github.com/sebastienbarre-forks/next.js-examples-with-mdx

To reproduce:

• npm run dev in a terminal
• in Chrome, refresh http://localhost:3000/ to display the index page, which has a link to the blog post
• click on the link to the blog post to display it.
• in an editor, edit the blog post, and save it
  => the "About to perform a full refresh" should appear. It doesn't always, but more often than not it does, and certainly when I have just re-run npm run dev.

Here is a video capture:

fastrefreshissue.mov

[kimsangyeon]

I am also experiencing the same issue.
There is an existing project composed of next.
This is happening after upgrading this project to next version 12.
A large error mark like this can have a big impact on the work of an existing project.
next In the previous version, it was exposed as a warning notation on the console.
How about giving the option to display only the console?

[trevorblades]

I'm noticing that this only happens when an MDX file has a named export. For example:

export const meta = {
  title: 'hello'
}

# some heading

lorem ipsum...

It doesn't seem to have a problem with an MDX file that contains a default export (layout).

[pgarciacamou]

Yep, noticing the same issue:

warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: apply() is only allowed in ready status (state: idle)
    at http://localhost:3000/_next/static/chunks/webpack.js?ts=1671822989113:609:21

And like @trevorblades mentioned, Fast Refresh doesn't have to perform a full reload as soon as I remove the named exports.

But now the styles do not hot-update 🤔