AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

SWC Styled-Jsx Infinite Loop With Member-Expression Interpolation And Derived JSX Component

Next.js build/dev hangs indefinitely in next-swc when a locally-derived JSX component variable (from a member expression) is used together with a styled-jsx template literal containing a member-expression interpolation; no error is emitted.

highConfidence 89%Next.jsAffected V16.4.0-Canary.0

Origin Analysis

The next-swc styled-jsx transform enters an infinite loop while attempting to resolve the dynamic JSX component Icon (assigned from t.icon) and the member-expression interpolation ${t.color} in the same component. The transform appears to re-visit the same AST nodes without making progress, likely due to a missing recursion guard for locally-derived component identifiers that originate from member expressions.
1. Create a Pages Router app with the provided single page. 2. Run `next build` or `next dev` and request the page. 3. Observe the build hangs with a next-swc thread spinning at full CPU and no output.

Fixing Code Block

Edge Case Audit

This is a source-level workaround and does not fix next-swc. The same hang may occur with other combinations of member expressions in styled-jsx. After upgrading to a Next.js version where the SWC bug is fixed, the original code should work again; revert this patch and re-test. The workaround assumes theme.icon evaluates to a valid React element type (string or component). If using TypeScript with stricter typing, replace any with React.ElementType.

Ecosystem Topology