[graphiql] graphiql is failing on v4

[sibelius]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

'use client'

import { GraphiQL } from 'graphiql'
import 'graphiql/style.css'

export default function GraphiQLPage() {
  return (
    <div style={{ height: '100vh' }}>
      <GraphiQL fetcher={async (graphQLParams) => {
        const response = await fetch('/api/graphql', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(graphQLParams),
        })
        return response.json()
      }} />
    </div>
  )
}

this setup is throwing an error

TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at VisualElementDragControls.addListeners (VisualElementDragControls.mjs:406:54)
    at DragGesture.mount (index.mjs:19:46)
    at HTMLVisualElement.updateFeatures (VisualElement.mjs:254:29)
    at useVisualElement.useIsomorphicLayoutEffect (use-visual-element.mjs:69:23)
    at react-stack-bottom-frame (react-dom-client.development.js:23054:20)
    at runWithFiberInDEV (react-dom-client.development.js:844:30)
    at commitHookEffectListMount (react-dom-client.development.js:11977:29)
    at commitHookLayoutEffects (react-dom-client.development.js:11927:11)
    at reappearLayoutEffects (react-dom-client.development.js:13745:11)
The above error occurred in the <MotionComponent> component. It was handled by the <ErrorBoundary> error boundary.

Expected Behavior

it should not break

Steps To Reproduce

create a nextjs app dir

try to render graphiql in a client side page, it will break

Environment

• GraphiQL Version: ^4.0.1
• OS: mac
• Browser: chrome
• Bundler: nextjs app dir
• react Version: 19.0.0
• graphql Version: 16.11.0

Anything else?

No response

[dimaMachina]

please provide runnable reproduction, so it could be fixed asap