Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Incompatibility with Cloudflare Vite Plugin

Aberta
#375 16 comentários 5 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
devtools

Direção de pesquisa

Comece pelo exemplo mínimo reproduzível vinculado e reproduza SSR com o plugin do Cloudflare e os painéis Form ou Pacer. Inspecione @tanstack/devtools-utils/dist/solid/esm/dev.js e o erro de importação do servidor Solid relatado; o trabalho estará concluído quando os plugins afetados funcionarem durante SSR com o plugin do Cloudflare habilitado.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
TypeScript
Estrelas
499
Forks
100
Merge médio
1d 17h
PRs com merge (30d)
4

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/devtools

Todas as issues de TanStack/devtools

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.