Gatsby Hot Reload not working with MDX

[don-esteban]

Description

Hot reload / browser refresh does not work with basic MDX setup.

Steps to reproduce

Clone repo gatsby-minimal-mdx-hot-reload-bug-reproduction.

gatsby develop

Edit src/pages/index.mdx

Expected result

Browsers will not refresh. Sometimes even manual browser reloads will not reflect the changes.

Environment

System:
  OS: macOS 10.15.7
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Shell: 5.7.1 - /bin/zsh
Binaries:
  Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
  npm: 7.6.1 - ~/.nvm/versions/node/v14.15.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 89.0.4389.82
  Firefox: 86.0
  Safari: 14.0.3
npmPackages:
  gatsby: ^3.0.1 => 3.0.3 
  gatsby-plugin-mdx: ^2.0.0 => 2.0.0 
  gatsby-source-filesystem: ^3.0.0 => 3.0.0 
npmGlobalPackages:
  gatsby-cli: 3.0.0

[dperetti]

Thank you! The fact that it now (in 3.0) not even refreshes at all on manual reload is a real blocker!

[gchallen]

Any updates on this? This is a blocker for us moving to Gatsby 3. I'm actually surprised that this wasn't fixed prerelease...

[pieh]

There few issues to solve here - some more problematic than others:

• @pmmmwh/react-refresh-webpack-plugin is not handling mdx files as default include option will not allow it ( https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/3fa414adb5162cfbe5dbe6e5e9043bd1874b15de/lib/utils/normalizeOptions.js#L39 ) - we either set this in core for mdx or just in gatsby-plugin-mdx (more likely)
• MDX when transpiled to js have 2 exports - one for template and other for frontmatter (even if it's not set, frontmatter will be empty object) - fast refresh will only work when there is single export, so we would need some thought on how to cover this (do we create additional virtual/intermediate module that only export component and then mdx module only pass it through?)

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[dperetti]

This is a serious blocker. Don't close.

[don-esteban]

Update: I can confirm that the bug still persists in Gatsby CLI 3.2.0. And, with this latest version, hot reload with JavaScript pages (not MDX) don't work anymore.

[LekoArts]

And, with this latest version, hot reload with JavaScript pages (not MDX) don't work anymore.

I don't think this is correct as I can't reproduce this behavior with correctly created pages. If you have any of the limitations (https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#limitations) then it won't work.

The original issue with MDX still persists though.

[gchallen]

Is this on the roadmap to being fixed? I'm concerned that Gatsby has reached 3.2 without this being addressed. This is a must-have feature for anyone authoring content in MDX.

[thecodingwizard]

Interestingly enough, my project, which queries for the mdx content using a page query in a template file, does not have any issues with hot reloading MDX. Perhaps hot reloading only doesn't work for .mdx pages?

[LekoArts]

Is this on the roadmap to being fixed?

It's surely on our radar but I can't give you exact dates. As my colleague pointed out there are multiple things we need to change to support src/pages/<name>.mdx.

Putting your MDX files outside of src/pages and then sourcing it via a page query will work because then Fast Refresh has your template file in the scope which has the correct setup: https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#limitations

Even when we fix the general behavior, when you'll do exports of non-React components in MDX files Fast Refresh will manually refresh.

[don-esteban]

And, with this latest version, hot reload with JavaScript pages (not MDX) don't work anymore.

I don't think this is correct as I can't reproduce this behavior with correctly created pages. If you have any of the limitations (https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#limitations) then it won't work.

The original issue with MDX still persists though.

Correct. Me neither. Can't reproduce the Hot-Reload-Issue for none MDX pages. My project still does not hot-reload non MDX pages and I can't locate the error. I did something wrong for sure.

[rysolv-bot]

mfurey has contributed $50.00 to this issue on Rysolv.

The total bounty is now $50.00. Solve this issue on Rysolv to earn this bounty.

[LekoArts]

This was fixed with gatsby 3.5.0 and gatsby-plugin-mdx 2.5.0