Incompatibility with Cloudflare Vite Plugin
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 499
- 派生
- 100
- 平均合并
- 1 天 17 小时
- 30 天内合并 PR
- 4
描述
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.
贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
调研方向
从链接的最小可复现示例开始，使用 Cloudflare 插件和 Form 或 Pacer 面板复现 SSR。检查 @tanstack/devtools-utils/dist/solid/esm/dev.js 以及报告的 Solid 服务器导入错误；当受影响的插件在启用 Cloudflare 插件的 SSR 期间能够正常工作时，即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- devtools
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100