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

(28 留言) (3 反應) (0 負責人)JavaScript (55,950 star) (10,198 fork)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
議題類型: 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.