Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby-plugin-mdx): enable hmr when importing mdx #31288

Merged
merged 13 commits into from May 11, 2021
Merged

fix(gatsby-plugin-mdx): enable hmr when importing mdx #31288

merged 13 commits into from May 11, 2021

Conversation

pieh
Copy link
Contributor

@pieh pieh commented May 6, 2021

Description

Currently HMR with fast-refresh doesn't work with mdx files. The reason is that mdx loader generate modules with 2 exports (MDXContent that is actual react component and frontmatter) which doesn't satisfy restrictions of fast refresh for there to be single export.

This is workaround preserving current frontmatter export (no breaking changes) by moving MDXContent component to different file (which will allow to refresh it).

This workaround mimics https://github.com/vuejs/vue-loader and creates separate module for MDX component (by importing same file with ?type=component query param) which allow fast-refresh webpack plugin to attach HMR handler for module that exports just MDXConent component

Related Issues

fixes #30062
[ch28635]

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 6, 2021
@pieh pieh added topic: hot reloading and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 6, 2021
@pieh pieh marked this pull request as ready for review May 10, 2021 15:30
vladar
vladar previously approved these changes May 11, 2021
Copy link
Contributor

@vladar vladar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is smart! 🤯 It's unfortunate that we have to do all this trickery with query strings, etc. But let's get it shipped.

Thank you! :shipit:

@LekoArts LekoArts added this to To cherry-pick in Release candidate via automation May 11, 2021
Copy link
Contributor

@LekoArts LekoArts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@pieh pieh merged commit c8db78f into master May 11, 2021
@pieh pieh deleted the fix/mdx-hmr branch May 11, 2021 15:41
vladar pushed a commit that referenced this pull request May 11, 2021
* save MDXContent to different file

* tmp: skip mdx loader unit tests

* test(e2e-mdx): upgrade cypress, setup running dev

* test(e2e-mdx): add hmr test case

* only apply hmr workaround to develop stage

* don't save mdx component to fs, use webpack tricks with query params

* wait for hmr in mdx/develop

* drop passthrough fs location

* revert unneeded change

* more reverts

* revert devtool debugging change

* adjust unit tests

* add more e2e test - editing prop in markdown, editing component imported by mdx

(cherry picked from commit c8db78f)
@vladar vladar moved this from To cherry-pick to Backport PR opened in Release candidate May 11, 2021
This was referenced Mar 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: DX Developer Experience (e.g. Fast Refresh, i18n, SSR, page creation, starters)
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Gatsby Hot Reload not working with MDX
3 participants