Skip to content

Add Gatsby image validation check#7782

Open
KatalKavya96 wants to merge 3 commits into
layer5io:masterfrom
KatalKavya96:fix/check-gatsby-images
Open

Add Gatsby image validation check#7782
KatalKavya96 wants to merge 3 commits into
layer5io:masterfrom
KatalKavya96:fix/check-gatsby-images

Conversation

@KatalKavya96

Copy link
Copy Markdown
Member

Description

This PR fixes #7650

This PR adds a Gatsby image validation guardrail through a new make check-images target.

The validation script scans Gatsby/React source files and reports <GatsbyImage /> components that are missing an explicit image prop. It supports both full project validation and scoped validation for a specific folder or file.

Example:

make check-images
make check-images -- src/pages/community

If missing image props are found, the command prints the file path and location, then exits with code 1.

Notes for Reviewers

Changes made:

  • Added scripts/find-missing-gatsby-images.js
  • Added check:images npm script
  • Added check-images Makefile target
  • Added support for scoped checks using folder/file paths

Tested with:

npm run check:images
make check-images
make check-images -- src/pages/community

Also manually tested with a temporary invalid <GatsbyImage /> missing the image prop, and the script correctly reported the issue with exit code 1.

Signed commits

  • Yes, I signed my commits.

Signed-off-by: Kavya Katal <kavyakatal09@gmail.com>
@github-actions

github-actions Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Preview deployment for PR #7782 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

@KatalKavya96

Copy link
Copy Markdown
Member Author

@lekaf974

@KatalKavya96 KatalKavya96 requested a review from lekaf974 June 10, 2026 16:45
@Junnygram

Copy link
Copy Markdown
Contributor

I have two minor suggestions to make it more robust:

  1. False Positives on Spreads: In hasImageProp, if a developer uses a spread operator (<GatsbyImage {...props} />), the attribute type is JSXSpreadAttribute, meaning attribute.name is undefined. The script currently flags these as failures. You might want to update the logic to return true (or skip validation) if attributes.some(attr => attr.type === 'JSXSpreadAttribute') is found, to prevent false positives.
  2. Dependencies: The script directly requires @babel/parser and @babel/traverse, but I don't see them added to package.json. Even if they are hoisted by Gatsby, it's best practice to explicitly add them to devDependencies to prevent "phantom dependency" issues on fresh installs in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add image validation for Gatsby components and enhance error handling

2 participants