fix(gatsby-transformer-javascript-frontmatter): support non-exported frontmatter to enable HMR#39428
Conversation
…frontmatter for HMR
gatsbot
Bot
added
the
status: triage needed
There was a problem hiding this comment.
Pull request overview
This PR fixes issue #35756 by enabling gatsby-transformer-javascript-frontmatter to extract frontmatter from non-exported variables. Previously, the plugin required frontmatter to be exported, which broke React Fast Refresh (HMR) since exporting non-component objects causes full page reloads. The change allows developers to define frontmatter as a simple const variable while maintaining backward compatibility with exported frontmatter.
Changes:
- Modified the AST traversal to visit
VariableDeclarationnodes instead of onlyExportNamedDeclarationnodes - Added parent type validation to process only top-level and exported variable declarations
- Added test coverage for non-exported frontmatter variables
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/gatsby-transformer-javascript-frontmatter/src/gatsby-node.js | Replaced ExportNamedDeclaration visitor with VariableDeclaration visitor that checks parent types to support both exported and non-exported frontmatter |
| packages/gatsby-transformer-javascript-frontmatter/src/tests/gatsby-node.js | Added test case to verify non-exported frontmatter variables are correctly parsed |
| packages/gatsby-transformer-javascript-frontmatter/src/tests/snapshots/gatsby-node.js.snap | Added snapshot for non-exported frontmatter test case |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (dataVariableDeclarator && dataVariableDeclarator.init) { | ||
| dataVariableDeclarator.init.properties.forEach(node => { | ||
| frontmatter[node.key.name] = parseData(node.value) | ||
| }) | ||
| } |
There was a problem hiding this comment.
The code directly accesses dataVariableDeclarator.init.properties without verifying that init is an ObjectExpression. This will cause a runtime error if frontmatter is assigned a non-object value (e.g., const frontmatter = someVariable or const frontmatter = getFrontmatter()). Consider adding a type check similar to line 57-61 where ObjectExpression is explicitly checked before accessing .properties.
…ect frontmatter and add regression tests
… frontmatter extraction
Summary
Fixes #35756
Currently,
gatsby-transformer-javascript-frontmatterrequiresfrontmatterto be an exported variable. However, exporting non-component objects from a page file breaks React Fast Refresh (HMR), causing full page reloads on every change.This PR updates the plugin to support extracting
frontmatterfrom non-exported variables (e.g.,const frontmatter = { ... }). This allows developers to define frontmatter without violating Fast Refresh's requirement that files only export React components.Changes
frontmattereven if it is not exported.src/__tests__/gatsby-node.jsto verify that non-exported frontmatter is correctly parsed.