RQ v5 devtools chartAt problem

[igortas]

Hi,
I've started getting this error with devtools in v5 when I'm clicking on the icon and devtools stops responding

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'charAt')
at getSidedProp (vendors-node_modules_tanstack_query-devtools_dist_esm_Devtools-a6a9d5b5_js.chunk.js:3959:25)
at Object.fn (vendors-node_modules_tanstack_query-devtools_dist_esm_Devtools-a6a9d5b5_js.chunk.js:4700:23)
at runComputation (bundle.js:309907:22)
at updateComputation (bundle.js:309890:3)
at runTop (bundle.js:309997:7)
at runUserEffects (bundle.js:310095:36)
at bundle.js:310064:34
at runUpdates (bundle.js:310013:17)
at completeUpdates (bundle.js:310064:17)
at runUpdates (bundle.js:310014:5)

"@tanstack/react-query-devtools": "^5.0.0-alpha.56",

I've tried with lower version, same issue...

[TkDodo]

@ardeora FYI

[ardeora]

Hi, I've started getting this error with devtools in v5 when I'm clicking on the icon and devtools stops responding

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'charAt')
at getSidedProp (vendors-node_modules_tanstack_query-devtools_dist_esm_Devtools-a6a9d5b5_js.chunk.js:3959:25)
at Object.fn (vendors-node_modules_tanstack_query-devtools_dist_esm_Devtools-a6a9d5b5_js.chunk.js:4700:23)
at runComputation (bundle.js:309907:22)
at updateComputation (bundle.js:309890:3)
at runTop (bundle.js:309997:7)
at runUserEffects (bundle.js:310095:36)
at bundle.js:310064:34
at runUpdates (bundle.js:310013:17)
at completeUpdates (bundle.js:310064:17)
at runUpdates (bundle.js:310014:5)

"@tanstack/react-query-devtools": "^5.0.0-alpha.56",

I've tried with lower version, same issue...

I'll be happy to take a look. Could you provide a minimal reproduction of this issue using codesandbox/stackblitz/git repo? Are you using Vite, Next, Remix?

[igortas]

It's cra app, I can't reproduce repo, it's work project, but if u can tried fresh cra app with all latest packages installed u can check if u will hit the same issue or not...

Try with all this packages installed as on my side:

{
"version": "0.1.0",
"private": true,
"dependencies": {
"@carbon/icons-react": "^11.20.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@grapecity/wijmo": "^5.20231.888",
"@grapecity/wijmo.react.grid": "^5.20231.888",
"@grapecity/wijmo.react.grid.filter": "^5.20231.888",
"@grapecity/wijmo.styles": "^5.20231.888",
"@mui/base": "^5.0.0-beta.4",
"@mui/icons-material": "^5.11.16",
"@mui/lab": "^5.0.0-alpha.133",
"@mui/material": "^5.13.4",
"@tanstack/react-query": "^5.0.0-alpha.56",
"lodash": "^4.17.21",
"lz-string": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-drag-drop-files": "2.3.10",
"react-resizable-panels": "^0.0.48",
"react-router-dom": "^6.12.0",
"react-scripts": "^5.0.1",
"react-virtuoso": "^4.3.9",
"web-vitals": "^3.3.2",
"xlsx": "^0.18.5",
"zustand": "^4.3.8"
},
"scripts": {
"check": "rome check src",
"format": "rome format src --write",
"start": "react-scripts start",
"build": "react-scripts build",
"start-dev": "react-scripts --openssl-legacy-provider start",
"build-dev": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@tanstack/react-query-devtools": "^5.0.0-alpha.56",
"@types/carbon__icons-react": "^11.20.0",
"@types/lodash": "^4.14.195",
"@types/node": "^20.2.5",
"@types/react": "^18.2.9",
"@types/react-dom": "^18.2.4",
"msw": "^1.2.1",
"rome": "^12.1.3",
"typescript": "^5.1.3"
},
"overrides": {
"typescript": "^5.1.3"
},
"msw": {
"workerDirectory": "public"
}
}

[ardeora]

This issue should be fixed in alpha.58 I checked and looks like the issue is fixed could you please confirm too? :D

[igortas]

@ardeora still the issue exists in alpha.58 with react-scripts. Tried with fresh credentials in regular browser session and in incognito mode.

Uncaught (in promise) TypeError: side is null
getSidedProp utils.tsx:30
node_modules vendors-node_modules_tanstack_query-devtools_dist_esm_Devtools-a6a9d5b5_js.chunk.js:4700
runComputation dev.js:696
updateComputation dev.js:679
runTop dev.js:784
runUserEffects dev.js:882
completeUpdates dev.js:851
runUpdates dev.js:800
completeUpdates dev.js:851
runUpdates dev.js:801
completeLoad dev.js:305
loadEnd dev.js:300
load dev.js:356

With vite was working well, I've tried with alpha.56. I didn't tried now with alpha.58.