Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Incompatibility with Cloudflare Vite Plugin

Ouverte
#375 16 commentaires 5 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react, typescript
Domaine
devtools

Piste de recherche

Commencez par l’exemple minimal reproductible lié et reproduisez SSR avec le plugin Cloudflare et les panneaux Form ou Pacer. Examinez @tanstack/devtools-utils/dist/solid/esm/dev.js et l’erreur d’importation du serveur Solid signalée ; le travail est terminé lorsque les plugins concernés fonctionnent pendant SSR avec le plugin Cloudflare activé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

TanStack Devtools version

0.9.9

Framework/Library version

Tanstack start RC (1.132.0)

Describe the bug and the steps to reproduce it
  1. Create a tanstack start project from scratch

  2. Follow the official guide for configuring tanstack start with cloudflare:

https://tanstack.com/start/latest/docs/framework/react/guide/hosting#cloudflare-workers--official-partner

  1. 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"
  1. 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.
Langage dominant
TypeScript
Étoiles
499
Forks
100
Merge moyen
1 j 17 h
PR mergées (30 j)
4

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/devtools

Toutes les issues de TanStack/devtools

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.