vercel / vercel/next.js

Build hangs forever (SWC infinite loop) when a locally-derived JSX component is combined with a member-expression styled-jsx interpolation

Open
#97,685 1 comment 0 reactions 0 assignees View on GitHub

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
  1. 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' }} />;
}
  1. Run next build (or next dev and request the page).
  2. The build prints Creating an optimized production build ... and never finishes — a next-swc thread 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, and next dev all hang the same way, so it appears to be in the shared SWC styled-jsx transform, not a bundler. A macOS sample of the spinning process shows the loop inside next-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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.