TanStack
Devtools crashes under TrustedTypes
Describe the bug
Crash
Your minimal, reproducible example
N/A
Steps to reproduce
Add a TrustedType policy before rendering the devtool.
Expected behavior
Do not use dangerouslySetInnerHTML.
https://github.com/TanStack/query/blob/fd02255066ac3a136f6b62863387c486d0d560fc/packages/react-query-devtools/src/devtools.tsx#L532
I see a nonce option but we cannot change the CSP header to do that. The HTML rendered can be static if you use CSS variables to replace them, or you can use CSSOM to insert CSS rules manually tooSheetElement.sheet
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Chrome
Tanstack Query adapter
None
TanStack Query version
4.29.7
TypeScript version
No response
Additional context
No response
@Jack-Works have you tried the devtools in v5 ?
can I use it with react-query v4?
hello @TkDodo I think this is not fixed in v5. A transitive dependency node_modules/.pnpm/[email protected][email protected]/node_modules/goober/dist/goober.modern.js does not work with trustedTypes.
can you show a reproduction please
Yes! By adding this to the HTML you can reproduce this. (Note only Chrome supports Trusted Types for now)
<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'">
If you need a playground, https://stackblitz.com/edit/github-vbuic1?file=index.html (a fork of react-query playground https://stackblitz.com/github/TanStack/query/tree/main/examples/react/simple with only the addition HTML above)
this hasn't been worked on for quite some months. If someone wants to work on this, I can re-open it. Otherwise, we'll just accept it as a known limitation