Skip to content

Upgrade Gatsby and plugins to @next for React 19 compatibility (Phase 1) #789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Upgrade Gatsby and plugins to @next for React 19 compatibility (Phase 1) #789

Copilot wants to merge 4 commits into from

Conversation

Copy link
Contributor

Copilot AI commented Nov 27, 2025 •
edited
Loading

  • Understand the current state of the repository
  • Identify all Gatsby plugins that need upgrading to @next
  • Upgrade Gatsby core and plugins to @next versions (staying on React 18)
  • Run linting after upgrade (same pre-existing error as before)
  • Run tests after upgrade (all 23 test suites pass, 55 tests pass)
  • Verify the build compiles successfully
  • Code review passed
  • Security scan completed
  • Fix CI build failure by adding .npmrc with legacy-peer-deps=true
  • Phase 2: Upgrade to React 19
    • Upgrade react and react-dom to ^19.2.0
    • Migrate tests from deprecated react-test-renderer to @testing-library/react
    • Update all 21 test files to use React Testing Library
    • Update snapshots for new testing library format
    • All tests pass (23 suites, 55 tests)

Upgraded Dependencies:

Phase 1 (Gatsby @next with React 18):

Package Before After
gatsby ^5.15.0 ^5.17.0-next.0
gatsby-plugin-emotion ^8.15.0 ^8.17.0-next.0
gatsby-plugin-image ^3.15.0 ^3.17.0-next.0
gatsby-plugin-manifest ^5.15.0 ^5.17.0-next.0
gatsby-plugin-offline ^6.15.0 ^6.17.0-next.0
gatsby-plugin-react-helmet ^6.15.0 ^6.17.0-next.0
gatsby-plugin-sitemap ^6.15.0 ^6.17.0-next.0
typescript (new) - ^5.9.3

Phase 2 (React 19):

Package Before After
react ^18.3.1 ^19.2.0
react-dom ^18.3.1 ^19.2.0
@testing-library/react (new) - ^16.3.0
@testing-library/dom (new) - ^10.4.1
@testing-library/jest-dom (new) - ^6.9.1
react-test-renderer ^18.3.1 removed (deprecated in React 19)

Additional changes:

  • Added .npmrc with legacy-peer-deps=true to fix CI builds
  • Created jest-setup.js to configure @testing-library/jest-dom
  • Updated jest.config.js to use new setup file
  • Migrated all 21 test files from react-test-renderer to @testing-library/react
  • Updated all 51 snapshots for the new testing library format

Notes:

  • Third-party plugins remain unchanged as they don't have @next versions
  • All tests pass successfully (23 test suites, 55 tests, 51 snapshots)
  • Minor React 19 warnings in Google Maps mock (stricter prop validation) - can be addressed later
  • Pre-existing linting error in picture.jsx is unrelated to these changes

Security Summary:

No security vulnerabilities were introduced by these changes.

Original prompt

This section details on the original issue you should resolve

<issue_title>Gatsby Next and React 19 support.</issue_title>
<issue_description>In gatsbyjs/gatsby#39180 (comment)

The gatsby team just shipped a preview of React 19 support in gatsby@next.

Let's give it a try and report back with any issues.

👉🏼 To upgrade, follow the upgrade guide in Primajin/eyesbound#39306, but use @next instead of @latest. For example:

npm install --legacy-peer-deps gatsby@next gatsby-plugin-postcss@next # ... any other gatsby-* deps

It would be especially helpful if you could apply this upgrade ↑ first (staying on React 18), let all tests run and then upgrade to React 19 separately in a later iteration. This will help validate all scenarios.

</issue_description>

<agent_instructions>Don't upgrade to react 19 yet. This will be done in a second iteration </agent_instructions>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@netlify
Copy link

netlify bot commented Nov 27, 2025 •
edited
Loading

✅ Deploy Preview for eyesbound ready!

Name Link
🔨 Latest commit 2721ce3
🔍 Latest deploy log https://app.netlify.com/projects/eyesbound/deploys/692ebc1863987c000837d80a
😎 Deploy Preview https://deploy-preview-789--eyesbound.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 100
Accessibility: 97
Best Practices: 100
SEO: 100
PWA: 100
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link

github-actions bot commented Nov 27, 2025 •
edited
Loading

Console Logs

ℹ️ Info

installingWorker ServiceWorker
Content is now available offline!

@codecov
Copy link

codecov bot commented Nov 27, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.63%. Comparing base (78d190b) to head (2721ce3).
✅ All tests successful. No failed tests found.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main     #789      +/-   ##
==========================================
+ Coverage   98.90%   99.63%   +0.73%     
==========================================
  Files          28       28              
  Lines         273      273              
  Branches       55       55              
==========================================
+ Hits          270      272       +2     
+ Misses          3        1       -2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot AI changed the title [WIP] Test Gatsby next with React 19 support Upgrade Gatsby and plugins to @next for React 19 compatibility (Phase 1) Nov 27, 2025
Copilot AI requested a review from Primajin November 27, 2025 16:38
Repository owner deleted a comment from github-actions bot Nov 27, 2025
@Primajin
Copy link
Owner

Primajin commented Nov 27, 2025

@copilot the build fails with

Run npm ci
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/gatsby
npm warn   gatsby@"^5.17.0-next.0" from the root project
npm warn
npm warn Could not resolve dependency:
npm warn peer gatsby@"^5.18.0-react19.0" from [email protected]
npm warn node_modules/babel-plugin-remove-graphql-queries
npm warn   babel-plugin-remove-graphql-queries@"^5.17.0-next.0" from [email protected]
npm warn   node_modules/gatsby
npm warn   2 more (gatsby-plugin-image, gatsby-plugin-typescript)
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/gatsby
npm warn   peer gatsby@"^5.18.0-react19.0" from [email protected]
npm warn   node_modules/babel-plugin-remove-graphql-queries
npm warn     babel-plugin-remove-graphql-queries@"^5.17.0-next.0" from [email protected]
npm warn     node_modules/gatsby
npm warn     2 more (gatsby-plugin-image, gatsby-plugin-typescript)
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/gatsby
npm error   gatsby@"^5.17.0-next.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer gatsby@"^5.0.0-next" from [email protected]
npm error node_modules/gatsby-plugin-emotion
npm error   gatsby-plugin-emotion@"^8.17.0-next.0" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/gatsby
npm error   peer gatsby@"^5.0.0-next" from [email protected]
npm error   node_modules/gatsby-plugin-emotion
npm error     gatsby-plugin-emotion@"^8.17.0-next.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/runner/.npm/_logs/2025-11-27T16_41_11_367Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2025-11-27T16_41_11_367Z-debug-0.log
Error: Process completed with exit code 1.

Copy link
Contributor Author

Copilot AI commented Nov 27, 2025 •
edited
Loading

@copilot the build fails with

...

Added .npmrc with legacy-peer-deps=true in commit 37f30c1. This ensures npm ci in CI uses the same legacy peer dependency resolution that was used during local installation with --legacy-peer-deps.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • unpkg.com
    • Triggering command: /usr/local/bin/node node scripts/postinstall.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@github-actions
Copy link

github-actions bot commented Nov 27, 2025

2025-11-27T16:55:11.163Z-desktopPage1140x640-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage1280x720-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage1920x1080-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage540x405-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage600x450-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage720x540-45d8cc9.jpeg

2025-11-27T16:55:11.163Z-desktopPage960x720-45d8cc9.jpeg

@Primajin
Copy link
Owner

Primajin commented Nov 27, 2025

@copilot great that looks good.

Now let's get to the next iteration and try to upgrade to react 19 (with the respective sibling dependencies)

So that we can report back to the Gatsby team if the upgrade worked flawlessly.

Copy link
Contributor Author

Copilot AI commented Nov 27, 2025 •
edited
Loading

@copilot great that looks good.

Now let's get to the next iteration and try to upgrade to react 19 (with the respective sibling dependencies)
...

Upgraded to React 19 in commit 97dafaa.

Key changes:

  • react and react-dom upgraded from ^18.3.1 to ^19.2.0
  • Migrated from deprecated react-test-renderer to @testing-library/react (21 test files updated)
  • All 23 test suites pass (55 tests, 51 snapshots)

The React 19 upgrade is ready to report back to the Gatsby team. There are minor console warnings in the Google Maps mock tests (React 19's stricter prop validation) but the upgrade works successfully with gatsby@next.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • unpkg.com
    • Triggering command: /usr/local/bin/node node scripts/postinstall.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@github-actions
Copy link

github-actions bot commented Nov 27, 2025

2025-11-27T17:22:47.581Z-desktopPage1140x640-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage1280x720-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage1920x1080-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage540x405-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage600x450-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage720x540-c52a8d3.jpeg

2025-11-27T17:22:47.581Z-desktopPage960x720-c52a8d3.jpeg

@Primajin Primajin force-pushed the copilot/test-gatsby-next-support branch from d05e772 to 2721ce3 Compare December 2, 2025 10:14
@github-actions
Copy link

github-actions bot commented Dec 2, 2025

2025-12-02T10:17:33.353Z-desktopPage1140x640-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage1280x720-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage1920x1080-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage540x405-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage600x450-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage720x540-c3017ae.jpeg

2025-12-02T10:17:33.353Z-desktopPage960x720-c3017ae.jpeg

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

Reviewers

@Primajin Primajin Awaiting requested review from Primajin

Assignees

@Primajin Primajin

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Gatsby Next and React 19 support.

2 participants

@Primajin