graphiql: [graphiql-react] GraphiQL 2.2.0 not working with webpack projects in React 17

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When running GraphiQL 2.2.0 in a React 17 (17.0.2) project I get the following compiler errors:

Compiled with problems:
ERROR in ./node_modules/graphiql/node_modules/@graphiql/react/dist/index.es.js 6297:13-20
export 'useId' (imported as 'useId$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/graphiql/node_modules/@graphiql/react/dist/index.es.js 6298:14-21
export 'useId' (imported as 'useId$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

This appears to be from a react import on the @reach/combo-box library, which gets bundled on the vite build of graphiql. The reach project implements an import guard in their code for auto-ids. Import guards can cause issues with webpack compilations as seen here and webpack is looking to fix it. As a workaround, reach has updated their code with a “safer” guard so that this error wouldn’t throw. It appears that this fix is available in v0.18. Currently graphiql is using v0.17 which still has the “unsafe” guard method. Upgrading the reach libs should hopefully fix the issue on the graphiql side

Expected Behavior

No error or warning should appear when using GraphiQL 2.2.0 in a React 17 (17.0.2) project.

Steps To Reproduce

1.- Clone this project [https://github.com/noelportugal/explorer]
2.- cd explorer
3.- `npm install`
4.- `npm run start`

Module pattern

• graphiql-umd
• graphiql-esm
• graphiql-commonjs

Environment

- GraphiQL Version:2.2.0
- OS: Mac Os
- Browser: Chrome
- Bundler:
- `react` Version: 17.0.2
- `graphql` Version: 16.6.0
- `webpack` Version: 5.64.4

Anything else?

No response