Incompatibility with Cloudflare Vite Plugin
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 499
- フォーク
- 100
- 平均マージ
- 1日 17時間
- マージ済み PR（30日）
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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