[graphiql]: support react 19, drop support react 16 and react 17

[dimaMachina]

fixes #3850

[changeset-bot]

🦋 Changeset detected

Latest commit: 168c364

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@graphiql/plugin-code-exporter	Major
@graphiql/plugin-explorer	Major
@graphiql/react	Minor
graphiql	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.92%. Comparing base (0b434a9) to head (168c364).
Report is 1 commits behind head on v4.

Additional details and impacted files

@@           Coverage Diff           @@
##               v4    #3897   +/-   ##
=======================================
  Coverage   63.92%   63.92%           
=======================================
  Files          35       35           
  Lines        3085     3085           
  Branches      948      948           
=======================================
  Hits         1972     1972           
  Misses       1108     1108           
  Partials        5        5           

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR updates the GrapiQL project to support React 19 while dropping support for React 16 and 17 by adjusting configuration targets, updating HeadlessUI component usage, and replacing deprecated ReactDOM methods with the new createRoot API.

• Update react compiler target version in vite.config.mts
• Replace HeadlessUI Combobox subcomponents in the explorer search
• Migrate tooltip rendering in the response editor from deprecated render/unmount methods to createRoot-based methods
• Adjust ESLint file patterns and add deprecation checks

Reviewed Changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/graphiql-react/vite.config.mts	Updates react compiler target from '17' to '18'
packages/graphiql-react/src/explorer/components/search.tsx	Switches Combobox components to new HeadlessUI subcomponents
packages/graphiql-react/src/editor/response-editor.tsx	Replaces deprecated ReactDOM methods with createRoot functions
.eslintrc.js	Updates ESLint rules, adjusting file patterns and adding no-deprecated rule
.changeset/gold-cooks-design.md	Documents major version bumps and new react support

Files not reviewed (4)

• packages/graphiql-plugin-code-exporter/package.json: Language not supported
• packages/graphiql-plugin-explorer/package.json: Language not supported
• packages/graphiql-react/package.json: Language not supported
• packages/graphiql/package.json: Language not supported

[mikespub]

Could you include how this affects the CDN example

[github-actions]

The latest changes of this PR are available as canary in npm (based on the declared changesets):

[email protected]
@graphiql/[email protected]
@graphiql/[email protected]
@graphiql/[email protected]

[Gr33nLight]

Keeping an eye on this, I'd say this is overdue

[dimaMachina]

Could you include how this affects the CDN example

@mikespub I think all examples should be updated to use an ESM-based CDN, since react 19 no longer ships UMD builds, wdyt about my following example?

https://github.com/dimaMachina/graphiql-esm.sh

[mikespub]

Could you include how this affects the CDN example

@mikespub I think all examples should be updated to use an ESM-based CDN, since react 19 no longer ships UMD builds, wdyt about my following example?

https://github.com/dimaMachina/graphiql-esm.sh

Thanks @dimaMachina

that's the reason I was wondering. I maintain a few PHP packages that provide GraphQL interfaces, and I include the CDN version of graphiql to make life easier for the people who want to explore them - which works great (thanks!).

I'm probably far from a "regular" graphiql user, but having a ready-to-use CDN example while keeping dependencies up to date is something that matters, and the lack of react 19 support was something that kept popping up. So I was happy to see this PR coming up, and I'm sorry if I kind of interrupted your flow there.

I was just hoping that at some point those changes could also be used in a CDN version for this kind of use cases...

Thanks

[dimaMachina]

Could you include how this affects the CDN example

@mikespub I think all examples should be updated to use an ESM-based CDN, since react 19 no longer ships UMD builds, wdyt about my following example?
dimaMachina/graphiql-esm.sh

Thanks @dimaMachina

that's the reason I was wondering. I maintain a few PHP packages that provide GraphQL interfaces, and I include the CDN version of graphiql to make life easier for the people who want to explore them - which works great (thanks!).

I'm probably far from a "regular" graphiql user, but having a ready-to-use CDN example while keeping dependencies up to date is something that matters, and the lack of react 19 support was something that kept popping up. So I was happy to see this PR coming up, and I'm sorry if I kind of interrupted your flow there.

I was just hoping that at some point those changes could also be used in a CDN version for this kind of use cases...

Thanks

Thank you! No worries, I will update CDN examples to ESM-based/React 19 in the following PRS before the stable GraphiQL v4 release ✌️