Cannot read properties of undefined (reading 'split')

I’m trying to setup graphiql v2

import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';

const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint' });

function MyComponent() {
  return (
    <GraphiQL fetcher={fetcher} />
  );
}

I have this simple code. It compiles and I can see the graphiql component rendered.

However, when I enter any query and Execute query it, it gives me this

{
  "errors": [
    {
      "message": "Cannot read properties of undefined (reading 'split')",
      "stack": "TypeError: Cannot read properties of undefined (reading 'split')\n    at splitLinesAuto (https://localhost/webpack-dev-server/dist/vendors-_yarn___virtual___graphiql-react-virtual-b20b6f5284_0_cache_graphiql-react-npm-0_13_2-4d8b7d.js:776:21)\n    at Object.splitLines (https://localhost/webpack-dev-server/dist/vendors-_yarn___virtual___graphiql-react-virtual-b20b6f5284_0_cache_graphiql-react-npm-0_13_2-4d8b7d.js:7167:16)\n    at Object.<anonymous> (https://localhost/webpack-dev-server/dist/vendors-_yarn___virtual___graphiql-react-virtual-b20b6f5284_0_cache_graphiql-react-npm-0_13_2-4d8b7d.js:6698:22)\n    at Object.setValue (https://localhost/webpack-dev-server/dist/vendors-_yarn___virtual___graphiql-react-virtual-b20b6f5284_0_cache_graphiql-react-npm-0_13_2-4d8b7d.js:4482:20)\n    at CodeMirror2.setValue (https://localhost/webpack-dev-server/dist/vendors-_yarn___virtual___graphiql-react-virtual-b20b6f5284_0_cache_graphiql-react-npm-0_13_2-4d8b7d.js:11101:27)\n    at setResponse (https://localhost/webpack-dev-server/dist/App.js:19870:22)\n    at handleResponse (https://localhost/webpack-dev-server/dist/App.js:19964:11)\n    at https://localhost/webpack-dev-server/dist/App.js:20012:9"
    }
  ]
}

it’s kind of impossible to debug for me, the stack trace is not very helpful to target the issue.

[simPod]

Omg! Years ago, when I implemented graphiql v1 it had no types so there was declare module 'graphiql'; somewhere in my project. That efficiently disabled typescript on v2 so did not notice. Thanks!

[jonathanawesome]

Couple of things there 👆.

First, you need to upgrade the GraphQL dependency.

Second, your fetcher setup is incorrect. Here are the docs.

Should be:

const graphQLFetcher = createGraphiQLFetcher({
    url: URL
  });

Working sandbox