Build hangs forever (SWC infinite loop) when a locally-derived JSX component is combined with a member-expression styled-jsx interpolation
Open
Nobody has claimed this yet.
SWC
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.5k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/hivapazira/next-swc-styled-jsx-hang-repro
To Reproduce
- Create a Pages Router app containing this single page:
// pages/index.tsx
const Probe = (props: { theme: { color: string; icon: any } }) => {
const t = props.theme;
const Icon = t.icon;
return (
<div className="probe">
<Icon />
<style jsx>{`
.probe {
color: ${t.color};
}
`}</style>
</div>
);
};
export default function Home() {
return <Probe theme={{ color: '#f00', icon: 'div' }} />;
}
- Run
next build(ornext devand request the page). - The build prints
Creating an optimized production build ...and never finishes — anext-swcthread spins at full CPU indefinitely (left for 15+ minutes; no output, no error, low/stable RSS).
Current vs. Expected behavior
- Current: compilation never completes and never errors.
next build(Turbopack),next build --webpack, andnext devall hang the same way, so it appears to be in the shared SWC styled-jsx transform, not a bundler. A macOSsampleof the spinning process shows the loop insidenext-swc.darwin-arm64.node. - Expected: the page compiles (it does on Next 13.4.4), or at minimum the compiler fails with an error.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.6.0: Fri Jul 31 19:18:29 PDT 2026; root:xnu-12377.161.14~5/RELEASE_ARM64_T8122
Available memory (MB): 16384
Available CPU cores: 8
Binaries:
Node: 24.19.0
npm: 11.17.0
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 16.4.0-canary.0 // Latest available version is detected (16.4.0-canary.0).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
SWC
Which stage(s) are affected? (Select all that apply)
next build (local), next dev (local)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Clone the linked next-swc-styled-jsx-hang-repro and run next build, then compare with next dev and next build --webpack. Trace the shared SWC styled-jsx transform implicated by the issue and use pages/index.tsx as the minimal input. Done means the page compiles, or the compiler exits with an error instead of hanging indefinitely.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react, typescript
- Domain
- build-system, compilers
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100