New to React and NodeJS: Rendering openapi 3.1 spec results in stack trace

[scastria]

If I render OAS 3.0 specs, I get no issue. But when I try to render an OAS 3.1 spec, I get this stack trace when using the latest 5.29.3 version. I am new to React and NodeJS so not sure if it is my bug or not:

[scastria]

If I hack the OAS 3.1 spec file and simply change the version to say 3.0.0, then the problem goes away. So it must be something in the 3.1 parser of this component?

[glowcloud]

Hi @scastria,

I tried to reproduce the issue using the swagger-ui-react + NextJS template from the wiki page, updating swagger-ui-react to the latest version. I was able to load OpenAPI 3.1.0 specs without any issues.

Could you try running the provided template and see if the problem persists? If the template works for you, the issue might be related to your project's transpiling or module configuration.

[scastria]

@glowcloud I cannot reproduce with the template as is using the exact same OAS 3.1 spec that causes the issue. I am going to change the dependency versions of the template to match my app which is using newer versions and see if I can recreate the issue.

[scastria]

@glowcloud I AM able to recreate the problem if I switch the template to use my package.json file. However, because I am still new to modern web development, I am probably not following best practices. In order for my package.json file to resolve packages, I have to run npm install --legacy-peer-deps. My package.json is this:

{
  "name": "swagger-ui-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^2.2.4",
    "ioredis": "^5.6.1",
    "js-yaml": "^4.1.0",
    "mobx": "^6.13.7",
    "next": "15.3.3",
    "next-auth": "^4.24.11",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-markdown": "^10.1.0",
    "react-widgets": "^5.8.6",
    "redoc": "^2.5.0",
    "remark-gfm": "^4.0.1",
    "styled-components": "^6.1.18",
    "swagger-ui-react": "^5.24.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4"
  }
}

[glowcloud]

@scastria It looks like this problem occurs when using the Turbopack bundler. With your package.json, the error appears with:

"dev": "next dev --turbopack",

but not with:

"dev": "next dev",

I'm not sure yet if this is a Turbopack bug or perhaps something wrong with exports in ApiDOM.

[gmonte]

@scastria It looks like this problem occurs when using the Turbopack bundler. With your package.json, the error appears with:

"dev": "next dev --turbopack",

but not with:

"dev": "next dev",

I'm not sure yet if this is a Turbopack bug or perhaps something wrong with exports in ApiDOM.

I have the same issue here. It works with webpack, but if I run with turbopack I get the same error: refract is not a function

[nashyvan]

I’m running into the exact same issue on Next.js 16.0.1 when using Turbopack.
The error appears immediately when loading Swagger UI:

TypeError: OpenApi3_1Element.refract is not a function

However, when I switch to Webpack, everything works fine.

Here’s a temporary workaround I’m using:

{
  "scripts": {
    "dev-webpack": "next dev --webpack"
  }
}

So it definitely seems to be related to how Turbopack handles the @swagger-api/apidom-* ESM exports.