[gatsby-transformer-javascript-frontmatter] Frontmatter export breaks HMR · gatsbyjs/gatsby#35756

(28 comments) (3 reactions) (0 assignees)JavaScript (55,950 stars) (10,198 forks)batch import

good first issuehelp wantedstatus: confirmedtopic: plugins

説明

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

Hot module reload (HMR) doesn't work, using gatsby-transformer-javascript-frontmatter plugin when javascript or typescript files export frontmatter.

This issue has been around since at least Gatsby 3, and continues in Gatsby 4.

Reproduction Link

https://github.com/yallllc/repro-js-frontmatter-hmr

Steps to Reproduce

Install gatsby-transformer-javascript-frontmatter plugin
Export frontmatter from a page
Make a visual change -- style or a jsx -- and see if the page updates on save

Expected Result

Page updates

Actual Result

Page doesn't update.

If the frontmatter export is commented out, HMR will start working again.

Environment

System:
    OS: Linux 5.4 Ubuntu 22.04 LTS 22.04 (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  npmPackages:
    gatsby: ^4.15.0 => 4.15.1 
    gatsby-transformer-javascript-frontmatter: ^4.15.0 => 4.15.0

Config Flags

No response

コントリビューターガイド

技術スタック: javascripttypescriptreactnodejs
領域: frontend
Issue 種別: bug
難度: 3
推定時間: 1-2 days
活動状況: active
明確さ: clear
前提条件: Basic knowledge of GatsbyUnderstanding of HMRFamiliarity with Gatsby plugins
初心者向け度: 35
調査方針: Investigate the gatsby transformer javascript frontmatter plugin source code (likely in packages/gatsby transformer javascript frontmatter) to understand how it processes frontmatter exports. The reproduction repo (https://github.com/yallllc/repro js frontmatter hmr) provides a minimal setup. Focus on how the plugin interacts with Gatsby's webpack HMR configuration, particularly the createPages or onCreateNode lifecycle hooks. Check the issue comments for any identified patterns or partial fixes. Determine why commenting out the frontmatter export restores HMR.