Upgrade Gatsby to v3?

[karlhorky]

Hi @jxnblk, would it be possible to bump the version of the gatsby dependency to ^3.0.0? It will also require upgrading gatsby-source-filesystem and gatsby-plugin-react-helmet.

Just trying this out via Yarn Resolutions (via the lines in my package.json below), and it appears to be working so far with no other changes.

package.json

{
  "resolutions": {
    "**/@mdx-deck/gatsby-plugin/gatsby-plugin-react-helmet": "4.12.0",
    "mdx-deck/gatsby": "3.12.1",
    "mdx-deck/gatsby-source-filesystem": "3.12.0",
    "mdx-deck/react": "17.0.2",
    "mdx-deck/react-dom": "17.0.2"
  }
}

[karlhorky]

‼️ Ah, hot reloading appears to be broken.

Maybe it has something to do with the usage of @mdx-js/loader in the Gatsby plugin.

Maybe a better way would be to use the approach taken by gatsby-plugin-mdx, with exports.preprocessSource and other methods.

---

Funny enough, it does appear to recognize the change (below are logs from the browser, which has recognized there is a change):

client.js:241 [HMR] bundle rebuilding
client.js:250 [HMR] bundle rebuilt in 926ms
process-update.js:51 [HMR] Checking for updates on the server...
process-update.js:125 [HMR] Updated modules:
process-update.js:127 [HMR]  - ../../slideDecks/deck25/index.mdx
process-update.js:127 [HMR]  - ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js
process-update.js:132 [HMR] App is up to date.

---

Seems like the issue may be fundamental in the MDX loader 🤔

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.

gatsbyjs/gatsby#31288

Next.js also had to do loader work for Fast Refresh: vercel/next.js#15851

---

Ahhh, gaearon's comment here is the reason for the hot reloading problems!

Just wanted to add I ran into this and then realized I had export const stuff = ... at the top of my MDX, which caused the bailout. I removed that and it worked.

The problem is my usage of a custom theme:

export { theme } from './theme'

So I'll figure out how to strip that (maybe with a custom webpack loader added after @mdx-js/loader).

---

Or if I can find a way to override the theme prop that's being passed to the wrapper component that mdx-deck is passing to <MDXProvider />... 🤔

Not sure where this theme prop is magically coming from actually...

After diving through a bunch of @mdx-deck/* and @mdx-js/* packages, closest that I came to finding it was this layoutProps thing here: @mdx/mdx/mdx-hast-to-jsx.js

---

Actually, maybe a simpler way would be to override the theme globally for all of my slide decks - since I only use a single theme... 🤔

---

Ended up going with another patch-package patch to patch @mdx-deck/gatsby-plugin/src/theme.js to add in my custom theme 😅

[karlhorky]

And any calls to require() seem to need to be replaced by require().default:

<CodeSurfer
  steps={[
    {
-     code: require('!raw-loader!./exampleTypescript.ts').replace(
+     code: require('!raw-loader!./exampleTypescript.ts').default.replace(
        / *\/\/ prettier-ignore\n/g,
        '',
      ),
      lang: 'ts',
    },
  ]}
  progress={0}
/>