[gatsby-plugin-mdx] Frontmatter shows up in page content

[karlhorky]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

After upgrading from gatsby-plugin-mdx@3.15.1 to gatsby-plugin-mdx@3.15.2, we're seeing our Frontmatter code show up in the content of the page 😱

This appears regardless of whether we have the JSFrontmatterEngine set to true or unconfigured...

cc @pieh @GeeWizWow

---

Workaround

A solution for gatsby build (SSG) requires reverting the change made by @pieh in #35830:

1. Commenting out passing all options to gray-matter in the mdx-loader.js, utils/mdx.js, utils/gen-mdx.js files (using patch-package)
2. And then ALSO enabling the JSFrontmatterEngine option

Super strange, wonder what's causing this Frontmatter to show up in the content.

Reproduction Link

https//.com/karlhorky/gatsby-mdx-frontmatter-bug

Steps to Reproduce

1. Upgrade existing project from gatsby-plugin-mdx@3.15.1 to gatsby-plugin-mdx@3.15.2
2. Run gatsby develop or gatsby build
3. Observe Frontmatter in the page content

Expected Result

No Frontmatter in the page content

Actual Result

Frontmatter displayed in the page content

Environment

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.11.0 - /var/folders/sw/v93sywxs2g1bcsr6ln488qfh0000gn/T/yarn--1654793941511-0.7489250249814705/node
    Yarn: 1.22.19 - /var/folders/sw/v93sywxs2g1bcsr6ln488qfh0000gn/T/yarn--1654793941511-0.7489250249814705/yarn
    npm: 8.7.0 - ~/.nvm/versions/node/v16.11.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 99.0.1
    Safari: 15.5

Config Flags

No response

[pieh]

Hi @karlhorky

We did merge the #35859 - the initial suggestion comments you made in the PR that introduced it made sense and we just used it. This was not release yet to npm.

I couldn't really reproduce the part about the change not working in builds - I suspect this is because of webpack caching (if you edit files in node_modules, webpack doesn't detect those - see https://webpack.js.org/configuration/cache/#cachemanagedpaths

Webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot (for both memory and filesystem cache).

So to test changes like that inside node_modules, you do need to nuke webpack cache (either gatsby clean or rm -rf .cache/webpack (to just nuke webpack caches).

I'm not sure if the change above is enough - this was targetted for webpack loader for now, but this is only usage of the matter field returned from gray-matter in MDX plugin. We will be checking other uses as well soon

[karlhorky]

Oh didn't see #35859 yet, thanks!! I'll be happy to test whether this fixes the issue without my patches when it is published to npm.

So to test changes like that inside node_modules, you do need to nuke webpack cache (either gatsby clean or rm -rf .cache/webpack (to just nuke webpack caches).

Yeah I was doing gatsby clean every time I changed the patch-package patch, to make sure that I wasn't confusing myself.

[pieh]

@karlhorky just released gatsby-plugin-mdx@3.16.1 with the change from the PR.

I did want to try the reproduction, but link seems borked. Tried using github.com ( https://github.com/karlhorky/gatsby-mdx-frontmatter-bug ) but repo like doesn't exist or is private

[karlhorky]

Ah sorry, that repo is not there right now.

But just upgraded to gatsby-plugin-mdx@3.16.1 and deleted my patch, and it seems to have resolved the problem! 🎉

Passing our tests:

And, no more Frontmatter content on the page:

Closing this out.