Cannot read properties of undefined (reading 'split')
See original GitHub issueI’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.
Issue Analytics
- State:
- Created a year ago
- Comments:13 (1 by maintainers)
Top Results From Across the Web
Cannot Read Property 'split' of Undefined - freeCodeCamp
it will throw the TypeError: Cannot read property 'split' of undefined error. The split method. When split is called on a string, it...
Read more >How to prevent cannot read property split of ... - Meticulous
If different values are assigned to a variable several times, calling the split() method on the variable when it is set to undefined...
Read more >Uncaught TypeError: Cannot read property 'split' of undefined
Your question answers itself ;) If og_date contains the date, it's probably a string, so og_date.value is undefined.
Read more >TypeError: Cannot read Property 'split' of Undefined in JS
The "Cannot read property 'split' of undefined" error occurs when trying to call the split() method on a variable that stores an undefined...
Read more >TypeError: Cannot read property 'split' of undefined - JavaScript
So the argument word is coming in as undefined and therefore you can't run split() on it. You can either make sure it...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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!Couple of things there 👆.
First, you need to upgrade the GraphQL dependency.
Second, your fetcher setup is incorrect. Here are the docs.
Should be:
Working sandbox