mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-15 21:05:51 +00:00
修复在 dev 模式下按下 Ctrl+O 切换 transcript 视图时 React 抛出
"Rendered fewer hooks than expected" 崩溃的问题。
## 根因分析
项目中有大量 hook(useState / useMemo / useRef / useSyncExternalStore 等)
被包裹在 `feature()` 三元表达式中条件调用,例如:
const value = feature('X') ? useHook() : defaultValue;
在 build 模式下 `feature()` 是编译时常量,死代码消除会移除未使用的分支,
hooks 数量在编译后是确定的。但在 dev 模式下(scripts/dev.ts 注入
--feature 启用全部 31 个 feature),`feature()` 是运行时调用,
但始终返回 true,因此所有 hooks 都会被调用,原本不会出问题。
真正的触发器是 REPL.tsx 第 5381 行的提前返回:
if (screen === 'transcript') { return transcriptReturn; }
当用户按下 Ctrl+O 进入 transcript 模式时,该提前返回之后的所有 hooks
(如 displayedAgentMessages 的 useMemo)都不会被调用,导致 React 在
下一次渲染时检测到 hooks 数量与上次不一致而崩溃。
此外,其他文件中也存在相同的条件式 hook 模式——虽然 dev 模式下
feature() 返回 true,所以这些路径实际上不会被触发,但它们是
潜在的隐患:若将来有人通过环境变量关闭某个 feature,
同样的崩溃会立即出现。
## 修复策略
采用统一模式:**始终无条件调用 hook,将 feature() gate 应用到值上**。
// Before (unsafe — hook count varies by feature flag)
const value = feature('X') ? useHook() : defaultValue;
// After (safe — hook always called, gate on the value)
const rawValue = useHook();
const value = feature('X') ? rawValue : defaultValue;
## 修改清单
### 核心修复(REPL.tsx)
- 将 `displayedAgentMessages` useMemo 及依赖变量(viewedTask /
viewedTeammateTask / viewedAgentTask / usesSyncMessages /
rawAgentMessages / displayedMessages)从 transcript 提前返回
之后移至之前,确保两模式下 hooks 调用顺序一致
- 修复 `disableMessageActions` / `useAssistantHistory` /
`voiceIntegration` 的条件式 hook 调用
### 条件式 hook 修复(11 个文件)
- src/hooks/useGlobalKeybindings.tsx — isBriefOnly / toggleBrief
keybinding 改为 isActive 门控
- src/hooks/useReplBridge.tsx — 5 个 BRIDGE_MODE 选值改为无条件调用
- src/hooks/useVoiceIntegration.tsx — 4 个 VOICE_MODE 选值修复
- src/components/PromptInput/Notifications.tsx — 4 个 feature 选值修复
- src/components/PromptInput/PromptInput.tsx — briefOwnsGap /
companionSpeaking 修复
- src/components/PromptInput/PromptInputFooterLeftSide.tsx — 4 个
VOICE_MODE 选值修复
- src/components/PromptInput/PromptInputQueuedCommands.tsx — isBriefOnly
- src/components/Spinner.tsx — briefEnvEnabled 修复
- src/components/TextInput.tsx — voiceState / audioLevels /
animationFrame 修复
- src/components/messages/AttachmentMessage.tsx — isDemoEnv 修复
- src/components/messages/UserPromptMessage.tsx — isBriefOnly /
viewingAgentTaskId / briefEnvEnabled 修复
- src/components/messages/UserToolResultMessage/UserToolSuccessMessage.tsx
— isBriefOnly 修复
### 其他修复
- src/components/FeedbackSurvey/useFrustrationDetection.ts — 将 3 个
提前返回合并为 shouldSkip 变量,handleTranscriptSelect 提前 return
- src/hooks/useIssueFlagBanner.ts — useRef 移到 USER_TYPE 检查之前
- src/hooks/useUpdateNotification.ts — useState 改为 useRef,
避免版本号变化触发不必要重渲染
### 构建/开发配置
- build.ts — 添加 `sourcemap: 'linked'`
- scripts/dev.ts — NODE_ENV 从 'production' 改为 'development'
Closes #434
109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { readdir, readFile, writeFile, cp } from 'fs/promises'
|
||
import { join } from 'path'
|
||
import { getMacroDefines } from './scripts/defines.ts'
|
||
import { DEFAULT_BUILD_FEATURES } from './scripts/defines.ts'
|
||
|
||
const outdir = 'dist'
|
||
|
||
// Step 1: Clean output directory
|
||
const { rmSync } = await import('fs')
|
||
rmSync(outdir, { recursive: true, force: true })
|
||
|
||
// Collect FEATURE_* env vars → Bun.build features
|
||
const envFeatures = Object.keys(process.env)
|
||
.filter(k => k.startsWith('FEATURE_'))
|
||
.map(k => k.replace('FEATURE_', ''))
|
||
const features = [...new Set([...DEFAULT_BUILD_FEATURES, ...envFeatures])]
|
||
|
||
// Step 2: Bundle with splitting
|
||
const result = await Bun.build({
|
||
entrypoints: ['src/entrypoints/cli.tsx'],
|
||
outdir,
|
||
target: 'bun',
|
||
splitting: true,
|
||
sourcemap: 'linked',
|
||
define: {
|
||
...getMacroDefines(),
|
||
// React production mode — eliminates _debugStack Error objects
|
||
// (6,889 objects × ~1.7KB = 12MB in development builds) and removes
|
||
// prop-type / key warnings not useful in a production CLI tool.
|
||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||
},
|
||
features,
|
||
})
|
||
|
||
if (!result.success) {
|
||
console.error('Build failed:')
|
||
for (const log of result.logs) {
|
||
console.error(log)
|
||
}
|
||
process.exit(1)
|
||
}
|
||
|
||
// Step 3: Post-process — replace Bun-only `import.meta.require` with Node.js compatible version
|
||
const files = await readdir(outdir)
|
||
const IMPORT_META_REQUIRE = 'var __require = import.meta.require;'
|
||
const COMPAT_REQUIRE = `var __require = typeof import.meta.require === "function" ? import.meta.require : (await import("module")).createRequire(import.meta.url);`
|
||
|
||
let patched = 0
|
||
for (const file of files) {
|
||
if (!file.endsWith('.js')) continue
|
||
const filePath = join(outdir, file)
|
||
const content = await readFile(filePath, 'utf-8')
|
||
if (content.includes(IMPORT_META_REQUIRE)) {
|
||
await writeFile(
|
||
filePath,
|
||
content.replace(IMPORT_META_REQUIRE, COMPAT_REQUIRE),
|
||
)
|
||
patched++
|
||
}
|
||
}
|
||
|
||
// Also patch unguarded globalThis.Bun destructuring from third-party deps
|
||
// (e.g. @anthropic-ai/sandbox-runtime) so Node.js doesn't crash at import time.
|
||
let bunPatched = 0
|
||
const BUN_DESTRUCTURE = /var \{([^}]+)\} = globalThis\.Bun;?/g
|
||
const BUN_DESTRUCTURE_SAFE =
|
||
'var {$1} = typeof globalThis.Bun !== "undefined" ? globalThis.Bun : {};'
|
||
for (const file of files) {
|
||
if (!file.endsWith('.js')) continue
|
||
const filePath = join(outdir, file)
|
||
const content = await readFile(filePath, 'utf-8')
|
||
if (BUN_DESTRUCTURE.test(content)) {
|
||
await writeFile(
|
||
filePath,
|
||
content.replace(BUN_DESTRUCTURE, BUN_DESTRUCTURE_SAFE),
|
||
)
|
||
bunPatched++
|
||
}
|
||
}
|
||
BUN_DESTRUCTURE.lastIndex = 0
|
||
|
||
console.log(
|
||
`Bundled ${result.outputs.length} files to ${outdir}/ (patched ${patched} for import.meta.require, ${bunPatched} for Bun destructure)`,
|
||
)
|
||
|
||
// Step 4: Copy native .node addon files (audio-capture) and vendored binaries (ripgrep)
|
||
const audioCaptureDir = join(outdir, 'vendor', 'audio-capture')
|
||
await cp('vendor/audio-capture', audioCaptureDir, { recursive: true })
|
||
console.log(`Copied vendor/audio-capture/ → ${audioCaptureDir}/`)
|
||
|
||
const ripgrepDir = join(outdir, 'vendor', 'ripgrep')
|
||
await cp('src/utils/vendor/ripgrep', ripgrepDir, { recursive: true })
|
||
console.log(`Copied src/utils/vendor/ripgrep/ → ${ripgrepDir}/`)
|
||
|
||
// Step 5: Generate cli-bun and cli-node executable entry points
|
||
const cliBun = join(outdir, 'cli-bun.js')
|
||
const cliNode = join(outdir, 'cli-node.js')
|
||
|
||
await writeFile(cliBun, '#!/usr/bin/env bun\nimport "./cli.js"\n')
|
||
|
||
await writeFile(cliNode, '#!/usr/bin/env node\nimport "./cli.js"\n')
|
||
|
||
// Make both executable
|
||
const { chmodSync } = await import('fs')
|
||
chmodSync(cliBun, 0o755)
|
||
chmodSync(cliNode, 0o755)
|
||
|
||
console.log(`Generated ${cliBun} (shebang: bun) and ${cliNode} (shebang: node)`)
|