Production stripping misses plugin factory imports, leaving unused Hotkeys font assets
還沒有人認領這個 Issue。
評估
- 難度
- 2/5
- 預估耗時
- 1-3 小時
- 新手友好度
- 78/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- react, typescript, vite
研究方向
從packages/devtools-bundler-core/src/remove-devtools.ts開始，特別查看getPluginReferences，並執行 issue 中獨立的removeDevtools重現。檢查plugins陣列中的直接呼叫運算式如何處理，並尋找 bundler-core 套件中的相關測試。完成標準是：如果 factory import 只在被移除的元素中使用，就將其移除；如果在其他地方也有使用，則予以保留。
由索引模型根據 Issue 內容生成。
描述
TanStack Devtools version
@tanstack/react-devtools:0.10.14@tanstack/devtools-vite:0.8.6@tanstack/devtools-bundler-core:0.1.4@tanstack/react-hotkeys-devtools:0.14.1- Transitive
@tanstack/devtools-ui:0.7.2
Framework/Library version
React 19.3.1; TanStack Start 1.169.4; Vite 8.3.5 / Rolldown 1.2.7 through Vite+ 1.4.0; Node.js 26.13.0.
Describe the bug
The production transform removes <TanStackDevtools> but leaves a plugin factory's import when the factory is used directly in the plugins array:
import { TanStackDevtools } from '@tanstack/react-devtools';
import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools';
export const App = () => (
<TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />
);
hotkeysDevtoolsPlugin is used only inside the removed element, but its import survives. The equivalent inline { name: 'Hotkeys', render: <HotkeysDevtoolsPanel /> } form removes both the element and the plugin import.
This occurs with devtools() first in the Vite plugins array and the default production removal enabled.
Minimal reproduction
The following isolates the stripping bug without a browser, app configuration, or access to the downstream repository. The React imports are source text passed to the parser, so only the bundler-core package needs to be installed.
Run in an empty directory:
npm init -y
npm install --save-exact @tanstack/[email protected]
node --input-type=module <<'NODE'
import { removeDevtools } from '@tanstack/devtools-bundler-core';
const factory = `import { TanStackDevtools } from '@tanstack/react-devtools';
import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools';
export const App = () => <TanStackDevtools plugins={[hotkeysDevtoolsPlugin()]} />;`;
const panel = `import { TanStackDevtools } from '@tanstack/react-devtools';
import { HotkeysDevtoolsPanel } from '@tanstack/react-hotkeys-devtools';
export const App = () => <TanStackDevtools plugins={[{name: 'Hotkeys', render: <HotkeysDevtoolsPanel/>}]} />;`;
for (const [name, source] of Object.entries({ factory, panel })) {
console.log(`${name}:\n${removeDevtools(source, 'App.tsx')?.code}`);
}
NODE
Actual output, reproduced against the installed package:
factory:
import { hotkeysDevtoolsPlugin } from '@tanstack/react-hotkeys-devtools';
export const App = () => null;
panel:
export const App = () => null;
Expected behavior
Both examples should produce export const App = () => null;, with no plugin import left behind. A factory import used elsewhere should of course be preserved.
Source investigation
In getPluginReferences, each array element is skipped unless it is an ObjectExpression:
if (!el || el.type !== 'ObjectExpression') continue
A direct hotkeysDevtoolsPlugin() entry is a CallExpression, so its identifier is never collected for the subsequent plugin-import cleanup. The logic handles calls inside an object's render property, but not calls directly inside the plugins array.
Associated production-build impact
Our production client build contains no retained devtools modules, but emits these unreferenced fonts from @tanstack/devtools-ui:
| Asset | Uncompressed bytes |
|---|---|
BricolageGrotesque-Bold-BIJrwikb.BIJrwikb.ttf |
82,204 |
Inter-latin-BwkfbSeq.BwkfbSeq.woff2 |
72,920 |
| Total | 155,124 (151.49 KiB) |
Neither filename is referenced by the generated client JS, CSS, HTML, or JSON. This increases emitted-output measurements; it is not evidence of an additional browser download.
The surviving static import appears to expose Vite's related unused-asset retention behavior (vitejs/vite#9073). The transform reproduction above establishes the import-cleanup gap independently of that bundler behavior.
Downstream tracking
Found while investigating mykiary/caniplay.today#293. That repository is private; the standalone reproduction above does not require access.
No upstream fix PR yet.
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.
- 主要語言
- TypeScript
- 星號
- 510
- 分支
- 103
- 平均合併
- 15 小時 31 分鐘
- 30 天內合併 PR
- 4
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
TanStack/devtools 的其他 Issue
-
難度 5/5 一週以上 新手友好度 25/100
-
devtools-vite: four transform hooks have no filter, and inject-plugin parses pre-bundled dependency chunks可能已有人在做 @shkumbinhasani 於 16 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 38/100
-
難度 2/5 1-3 小時 新手友好度 52/100
-
難度 3/5 1-2 天 新手友好度 68/100
-
難度 4/5 3-5 天 新手友好度 52/100
查看 TanStack/devtools 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 66/100
riverqueue/river#1576 ·
維護者通常 1 天內回覆
-
[bug] A prompt queued during a run is assessed without its text可能已有人在做 @jwiegley 今天認領。 未關閉
難度 2/5 1-3 小時 新手友好度 72/100
DevMortimer/pi-warden#211 ·
維護者通常 1 天內回覆
-
enhancement
難度 1/5 1 小時以內 新手友好度 84/100
mattermost/compass-design#191 ·
維護者通常 1 天內回覆
-
Add unit tests for the organization admin role check可能已有人在做 @SaffuSafwan 今天認領。 未關閉area/core good first issue help wanted
難度 1/5 1 小時以內 新手友好度 90/100
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 62/100
HorusGoul/trizum#559 · 1 則留言 ·
維護者通常 1 天內回覆