›_ Claude Code Issues
Claude Code Issues / #3045

Investigation: Fixing IME Issues in Claude Code by Patching React Ink / React Inkのパッチによる Claude Code のIME問題修正について

Resolved 💬 1 comment Opened Jul 6, 2025 by takeru Closed Jul 6, 2025

Investigation: Fixing IME Issues in Claude Code by Patching React Ink

Summary

I investigated the possibility of fixing the IME (Input Method Editor) performance issues in Claude Code by patching or replacing the React Ink components. While Claude Code definitely uses React Ink's TextInput component (which has known IME issues), direct patching is not feasible due to the distribution format.

Background

  • Issue: #1547 - IME input causes significant performance degradation and duplicate conversion candidates
  • Root Cause: React Ink's TextInput component makes incorrect assumptions about IME usage in terminal environments
  • Affected Users: Japanese, Chinese, and Korean language users experiencing 200-500ms input latency

Investigation Findings

1. Claude Code Distribution Format

  • Distributed as npm package: @anthropic-ai/claude-code
  • Main executable: Single bundled JavaScript file (cli.js - ~7.6MB)
  • Installation path: ~/.volta/tools/image/node/[version]/lib/node_modules/@anthropic-ai/claude-code/
  • Zero dependencies in package.json - everything is bundled

2. React Ink Usage Confirmed

# Found references in the bundled code:
$ strings cli.js | grep -E "(ink-text-input|TextInput|useInput)" | head -10
# Results show TextInput and useInput references

Claude Code is confirmed to use React Ink for its terminal UI, listed alongside GitHub Copilot CLI and Cloudflare Wrangler as notable Ink-based projects.

3. Why Direct Patching Won't Work

The bundled cli.js file is:

  • Heavily obfuscated with non-semantic variable names
  • Minified with concatenated lines
  • All dependencies bundled - no separate node_modules
  • No source maps available

Example of the obfuscated code structure:

// What we'd need to find and patch:
// TextInput component with IME handling
// But it looks like: 
...{isFocused:A})=>({dimColor:!A})}},Ew0=pBQ;var lBQ={styles:{container:()=>...

4. Related Issues

Other open IME-related issues:

  • #1553: IME Composition Input Rendering Lag for Non-Latin Scripts
  • #2620: IME Composition Failure for Korean Character Input

Potential Solutions

Option 1: Official Fix (Recommended)

Wait for Anthropic to update the React Ink dependency or implement a custom TextInput component with proper IME support.

Option 2: Community Fork

If Claude Code becomes open source, the community could:

  1. Fork the repository
  2. Replace React Ink's TextInput with an IME-aware implementation
  3. Build and distribute an alternative version

Option 3: Workaround Tools

Create external tools that:

  • Intercept terminal input before it reaches Claude Code
  • Handle IME composition externally
  • Send completed text to Claude Code

Option 4: Upstream Fix

Contribute a fix to React Ink itself, though this would still require Claude Code to update its bundled version.

Reproduction Repository

I've created a minimal reproduction of the IME bug using React Ink:
https://github.com/takeru/react-ink-ime-bug

This demonstrates the exact issue users are experiencing with Claude Code.

Conclusion

While the root cause is clear (React Ink's TextInput component), the current distribution method makes it impossible to apply a direct patch. The issue requires either:

  1. An official update from Anthropic
  2. Open-sourcing Claude Code for community fixes
  3. Development of external workaround tools

For affected users, the only current workaround is to compose text in an external editor and paste it into Claude Code.

References

---

調査: React Inkのパッチによる Claude Code のIME問題修正について

概要

Claude CodeのIME（Input Method Editor）パフォーマンス問題を、React Inkコンポーネントのパッチや置き換えによって修正する可能性を調査しました。Claude CodeはIME問題を抱えるReact InkのTextInputコンポーネントを使用していることが確認できましたが、配布形式の関係で直接的なパッチは実現不可能です。

背景

  • 問題: #1547 - IME入力が著しいパフォーマンス低下と重複する変換候補を引き起こす
  • 根本原因: React InkのTextInputコンポーネントがターミナル環境でのIME使用について誤った前提を持っている
  • 影響を受けるユーザー: 日本語、中国語、韓国語ユーザーが200-500msの入力遅延を経験

調査結果

1. Claude Codeの配布形式

  • npmパッケージとして配布: @anthropic-ai/claude-code
  • メイン実行ファイル: 単一のバンドルされたJavaScriptファイル (cli.js - 約7.6MB)
  • インストールパス: ~/.volta/tools/image/node/[version]/lib/node_modules/@anthropic-ai/claude-code/
  • package.jsonには依存関係ゼロ - すべてがバンドルされている

2. React Inkの使用を確認

# バンドルされたコード内で参照を発見:
$ strings cli.js | grep -E "(ink-text-input|TextInput|useInput)" | head -10
# TextInputとuseInputの参照が見つかる

Claude CodeはターミナルUIにReact Inkを使用していることが確認され、GitHub Copilot CLIやCloudflare Wranglerと並んで、Inkベースの主要プロジェクトとしてリストされています。

3. 直接パッチが機能しない理由

バンドルされたcli.jsファイルは:

  • 意味のない変数名で高度に難読化されている
  • 行が連結されて最小化されている
  • すべての依存関係がバンドルされている - 個別のnode_modulesなし
  • ソースマップが利用不可

難読化されたコード構造の例:

// パッチする必要があるもの:
// IME処理を含むTextInputコンポーネント
// しかし実際はこのような形: 
...{isFocused:A})=>({dimColor:!A})}},Ew0=pBQ;var lBQ={styles:{container:()=>...

4. 関連する問題

その他のオープンなIME関連の問題:

  • #1553: 非ラテン文字のIMEコンポジション入力レンダリングの遅延
  • #2620: 韓国語文字入力のIMEコンポジション失敗

潜在的な解決策

オプション1: 公式修正（推奨）

AnthropicがReact Inkの依存関係を更新するか、適切なIMEサポートを持つカスタムTextInputコンポーネントを実装するのを待つ。

オプション2: コミュニティフォーク

Claude Codeがオープンソース化された場合、コミュニティは:

  1. リポジトリをフォーク
  2. React InkのTextInputをIME対応の実装に置き換え
  3. 代替バージョンをビルドして配布

オプション3: 回避ツール

以下を行う外部ツールを作成:

  • Claude Codeに到達する前にターミナル入力をインターセプト
  • IMEコンポジションを外部で処理
  • 完成したテキストをClaude Codeに送信

オプション4: アップストリーム修正

React Ink自体に修正を貢献する。ただし、これでもClaude Codeがバンドルされたバージョンを更新する必要がある。

再現リポジトリ

React Inkを使用したIMEバグの最小限の再現を作成しました:
https://github.com/takeru/react-ink-ime-bug

これはユーザーがClaude Codeで経験している問題を正確に示しています。

結論

根本原因は明確（React InkのTextInputコンポーネント）ですが、現在の配布方法では直接的なパッチの適用は不可能です。この問題には以下のいずれかが必要です:

  1. Anthropicからの公式アップデート
  2. コミュニティ修正のためのClaude Codeのオープンソース化
  3. 外部回避ツールの開発

影響を受けるユーザーにとって、現在の唯一の回避策は、外部エディタでテキストを作成してClaude Codeに貼り付けることです。

参照

View original on GitHub ↗

This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗