Skip to content

Turbopack compilation error with Swagger #86507

@Ulis123

Description

@Ulis123

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    TurbopackRelated to Turbopack with Next.js.linear: turbopackConfirmed issue that is tracked by the Turbopack team.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions