gatsbyjs/gatsby

[gatsby-transformer-javascript-frontmatter] Frontmatter export breaks HMR

Open

#35756 opened on May 25, 2022

View on GitHub
 (28 comments) (3 reactions) (0 assignees)JavaScript (55,950 stars) (10,198 forks)batch import
good first issuehelp wantedstatus: confirmedtopic: plugins

Description

Preliminary Checks

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

  1. Install gatsby-transformer-javascript-frontmatter plugin
  2. Export frontmatter from a page
  3. 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

Contributor guide

Tech stack
javascripttypescriptreactnodejs
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of GatsbyUnderstanding of HMRFamiliarity with Gatsby plugins
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
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.