Repository navigation
React compiler breaks components that traverse immediate children #1105
Description
Problem
The Lingo compiler breaks React components that traverse their immediate children (e.g., using React.Children.map or similar patterns). This happens because the compiler swaps JSX elements containing localizable text with LingoComponent instances, changing the component tree structure that parent components expect.
Example
When a parent component like a Tab container expects specific child components:
// Parent component expects Tab children
<TabContainer>
<Tab>Home</Tab>
<Tab>Settings</Tab>
</TabContainer>
// After Lingo compilation, structure changes:
<TabContainer>
<LingoComponent ={...} ="..." ="..." />
<LingoComponent ={...} ="..." ="..." />
</TabContainer>The parent can no longer find its expected Tab children, breaking functionality.
Expected Behavior
The compiler should preserve the original component structure when transforming localizable text, ensuring parent-child relationships remain intact.
Possible Solution
One idea to consider: instead of swapping the component with LingoComponent while proxying props, the compiler could swap just the JSX text with a LingoChunk component (or similar) that returns either a string directly or a string wrapped in a Fragment (to avoid complicating the DOM).
Acceptance Criteria
- Identify common React patterns that traverse immediate children (Tab containers, Accordions, etc.)
- Implement compiler logic to preserve component tree structure during localization
- Add test cases for components using
React.ChildrenAPIs - Ensure transformed components maintain their original type/displayName for parent recognition
Activity
github-actions commentedon Aug 1, 2025
Claude finished @maxprilutskiy's task —— View job
Issue Analysis and Triage âś…
Completed comprehensive triage of the React compiler issue:
Technical Summary
The issue is in
packages/compiler/src/jsx-scope-inject.tsat line 136 wherejsxScope.replaceWith(newNode)completely replaces JSX elements withLingoComponentinstances. This breaks React components that useReact.Children.map,React.Children.forEach, or similar APIs to traverse immediate children.The suggested solution to use a
LingoChunkcomponent for text-only replacement while preserving the original component structure is architecturally sound and would maintain parent-child relationships.github-actions commentedon Aug 1, 2025
Hey @maxprilutskiy! Good to see you back. If you want to discuss this in real-time, we're always on Discord.
github-actions commentedon Aug 1, 2025
Based on the codebase, this affects jsx-scope-inject.ts in packages/compiler/src/jsx-scope-inject.ts around line 136. The compiler completely replaces JSX elements with LingoComponent instances using jsxScope.replaceWith(newNode), which breaks parent components that use React.Children.map or similar patterns to traverse their immediate children.
github-actions commentedon Aug 1, 2025
cc @mathio for CLI and compiler functionality
anmolsah commentedon Oct 29, 2025
hey @maxprilutskiy , I’ve gone through this issue and the related compiler code in jsx-scope-inject.ts. I understand that replacing the entire JSX element with LingoComponent breaks parent-child traversal in React components. I’d like to work on this issue and contribute a fix that preserves the original component structure while still handling localization.
fix: preserve component tree structure for React.Children APIs
codesmith17 commentedon Oct 31, 2025
hey @maxprilutskiy
i've created a PR for this: #1476
fix: preserve component tree structure for React.Children APIs