TanStack / TanStack/devtools

devtools-ui 0.7.0 breaks SSR boot with solid-js <=1.9.12: `use` is not exported by solid-js/web server build

オープン 初心者向け
#511 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
TypeScript
スター
499
フォーク
100
平均マージ
1日 17時間
マージ済み PR(30日)
4

説明

TanStack Devtools version

@tanstack/devtools 0.14.0 / @tanstack/devtools-ui 0.7.0 (still present in 0.14.1 / 0.7.1, the latest at time of filing)

Framework/Library version

TanStack Start (@tanstack/react-start 1.168.x) + Vite 8 (rolldown) + @cloudflare/vite-plugin, solid-js 1.9.12 in the lockfile

Describe the bug

Upgrading @tanstack/devtools 0.13.0 → 0.14.0 (which bumps the bundled @tanstack/devtools-ui 0.6.0 → 0.7.0) makes vite dev fail to boot in any app whose SSR environment processes devtools, when the resolved solid-js is ≤ 1.9.12:

Error: Error during dependency optimization:

[MISSING_EXPORT] "use" is not exported by "node_modules/solid-js/web/dist/server.js".
   ╭─[ node_modules/@tanstack/devtools/node_modules/@tanstack/devtools-ui/dist/esm/components/theme.js:2:45 ]
   │
 2 │ import { createComponent, insert, template, use } from "solid-js/web";
   │                                             ─┬─
   │                                              ╰─── Missing export

The dev server never starts, which also takes down every Playwright run driven by vite dev.

Root cause
  • @tanstack/devtools-ui 0.7.0 (PR #492, commit a46d1f5) wrapped ThemeContextProvider's children in <span style="display:contents" ref={setContainer}> so it can call ensureDevtoolsStyles(element.ownerDocument) (src/components/theme.tsx). The Solid compiler emits that ref as use(setContainer, _el$), so the published ESM (dist/esm/components/theme.js) now imports use from solid-js/web. In 0.6.0 that file imported only createComponent.
  • Under the node/SSR export condition, solid-js/web resolves to web/dist/server.js. That server build exported no use at all through solid-js 1.9.12; solid-js 1.9.13 (2026-05-15) added it as a notSup stub (notSup as use).
  • @tanstack/devtools-ui declares solid-js: >=1.9.7 (and @tanstack/devtools depends on ^1.9.9), so resolvers happily keep ≤ 1.9.12 in existing lockfiles — a lockfile that worked with devtools 0.13.0 hard-fails right after the bump.

Client-only setups never hit it (the browser build has always exported use), which is presumably why it shipped unnoticed. It surfaces wherever the SSR side bundles or import-validates devtools — e.g. TanStack Start with rolldown-vite's SSR dependency optimizer.

Steps to reproduce
  1. Lockfile with solid-js@1.9.12 (any version ≥1.9.7 and ≤1.9.12 works) and @tanstack/devtools@0.14.x.
  2. Import devtools in an app whose Vite SSR environment processes it (TanStack Start default setup is enough).
  3. vite devMISSING_EXPORT "use" during SSR dependency optimization.

Or minimally, in any Node ESM context resolving the server condition:

import { use } from 'solid-js/web'; // solid-js@1.9.12, server condition → SyntaxError/MISSING_EXPORT
Suggested fix

Raise the solid-js floor to ^1.9.13 in @tanstack/devtools-ui's (and @tanstack/devtools's) dependency ranges, so resolvers pull a solid-js whose server build has the use stub. Alternatively avoid the refuse emission in output that gets loaded under the server condition.

Workaround for affected users: force-dedupe solid-js to ≥ 1.9.13 (we removed the stale nested resolutions from the lockfile so a single hoisted 1.9.15 serves everything; that fixes the boot).

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

src/components/theme.tsx から始め、issue に記載されているサーバー条件用の最小限の import と solid-js 1.9.12 を使って、SSR の依存関係最適化の失敗を再現します。公開パッケージの互換性問題を解決し、影響を受ける依存関係の範囲を使った SSR セットアップで vite dev が起動し、missing-export エラーが発生しなくなったことを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript, vite
領域
tooling
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
75/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。