Incompatibility with Cloudflare Vite Plugin
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 499
- Forks
- 100
- Ø Merge
- 1 T. 17 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
TanStack Devtools version
0.9.9
Framework/Library version
Tanstack start RC (1.132.0)
Describe the bug and the steps to reproduce it
-
Create a tanstack start project from scratch
-
Follow the official guide for configuring tanstack start with cloudflare:
- Install the different tanstack plugins.
I managed to replicate them using these versions:
- "@tanstack/react-query-devtools": "^5.84.2"
- "@tanstack/react-form-devtools": "^0.2.17"
- "@tanstack/react-pacer-devtools": "^0.5.2"
- "@tanstack/react-router-devtools": "^1.132.0"
- Try to import the plugins and add them to
<TanStackDevTools/>
function RootDocument({ children }: Props) {
return (
<html>
<head>
<HeadContent />
</head>
<body>
<TanStackDevtools
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
{
name: "Tanstack Query",
render: <ReactQueryDevtoolsPanel />,
},
// These last two break the app when executing anything SSR
{
name: "Tanstack Form",
render: <FormDevtoolsPanel />,
},
{
name: "Tanstack Pacer",
render: <PacerDevtoolsPanel />,
},
]}
/>
<Scripts />
</body>
</html>
);
}
The issue only occurs when executing anything SSR:
✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.10/node_modules/solid-js/web/dist/server.js" for import "use"
node_modules/.pnpm/@tanstack+devtools-utils@0.3.1_@types+react@19.2.2_csstype@3.1.3_react@19.2.0_solid-js@1.9.10/node_modules/@tanstack/devtools-utils/dist/solid/esm/dev.js:1:34:
1 │ ...eateComponent, insert, use, template } from 'sol...
╵ ~~~
Plugins affected
Funningly enough, this only happens with certain plugins. Some plugins work and some other's don't. Here's the list of what I've experienced:
- Tanstack Router ✔️
- Tanstack Query ✔️
- Tanstack Pacer ❌
- Tanstack Form ❌
Temporary fix
The issue disapears when I remove the cloudflare plugin. As I use this only for develpoment purposes, I can simply comment the code out, use the plugin and then put it back in when im done with development.
Thank you!
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://github.com/randreu28/devtools_issue_375
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginnen Sie mit dem verlinkten minimalen reproduzierbaren Beispiel und reproduzieren Sie SSR mit dem Cloudflare-Plugin und den Form- oder Pacer-Panels. Untersuchen Sie @tanstack/devtools-utils/dist/solid/esm/dev.js und den gemeldeten Solid-Server-Importfehler; abgeschlossen ist die Aufgabe, wenn die betroffenen Plugins während SSR mit aktiviertem Cloudflare-Plugin funktionieren.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- devtools
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100