vercel / vercel/next.js

Turbopack compilation error with Swagger

Open
#86,507 4 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

linear: turbopack Turbopack
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/vigorous-water-dtwl8q

To Reproduce
  1. npm i swagger-ui-react
  2. npm run dev
Current vs. Expected behavior
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

export default function Home() {
  return (
    <div>
      <main>
        <SwaggerUI spec={schema} />
      </main>
    </div>
  );
}

Turbopack can't compile the Swagger correctly and returns an error in the console:

Image

In the UI, there is an infinite loader, and the content can't be loaded because of the issue

Image
Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11
  Available memory (MB): 65281
  Available CPU cores: 24
Binaries:
  Node: 22.21.0
  npm: 10.9.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.4
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
  swagger-ui-react: 5.30.3
Next.js Config:
  output: standalone
Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

The only fix that I found for now is to use --webpack in the scripts. Example: next dev --webpack. With Webpack, it's working fine.

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

Reproduce the issue from the linked CodeSandbox with npm i swagger-ui-react, then run npm run dev and next build using the reported versions. Compare Turbopack with the documented --webpack workaround and trace the compilation error; done means Swagger UI compiles and loads without switching to Webpack.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
build-system, devtools
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.