Swagger-ui-react not working with nextjs since 5.3.2

[ViddeM]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Firefox
• Version: 117.0.1
• Method of installation: npm
• Swagger-UI version: 5.7.2 (or any other > 5.3.2)
• Swagger/OpenAPI version: Swagger 2.0, OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:
Not relevant (it's never loaded).

Swagger-UI configuration options:

<SwaggerUI
    url={schemaUrl}
    requestSnippetsEnabled={true}
    defaultModelExpandDepth={1000}
    defaultModelsExpandDepth={1000}
/>

Describe the bug you're encountering

After updating to swagger-ui-react to any version higher than 5.3.2 I get the error: TypeError: Class extends value undefined is not a constructor or null along with a stacktrace when compiling the page.

Stacktrace (with redacted project path):

Server Error

TypeError: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
File
node_modules\swagger-ui-react\swagger-ui-bundle.js (2:813819)
eval
node_modules\swagger-ui-react\swagger-ui-bundle.js (2:1383722)
eval
node_modules\swagger-ui-react\swagger-ui-bundle.js (2:1383738)
s
node_modules\swagger-ui-react\swagger-ui-bundle.js (2:113)
eval
node_modules\swagger-ui-react\swagger-ui-bundle.js (2:244)
./node_modules/swagger-ui-react/swagger-ui-bundle.js
file:/PROJECT_DIR/.next/server/vendor-chunks/swagger-ui-react.js (20:1)
__webpack_require__
file:/PROJECT_DIR/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./node_modules/swagger-ui-react/index.mjs (7:69)
./node_modules/swagger-ui-react/index.mjs
file:/PROJECT_DIR/.next/server/vendor-chunks/swagger-ui-react.js (41:1)
__webpack_require__
file:/PROJECT_DIR/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./src/components/views/Swagger.tsx (11:74)
./src/components/views/Swagger.tsx
file:/PROJECT_DIR/.next/server/pages/index.js (74:1)
__webpack_require__
file:/PROJECT_DIR/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./src/pages/index.tsx (13:83)
__webpack_require__.a
file:/PROJECT_DIR/.next/server/webpack-runtime.js (97:13)

To reproduce...

Steps to reproduce the behavior:

1. Use any version of swagger-ui-react after 5.3.2 in a project running nextjs 13.

Expected behavior

The module should compile without issues.

Screenshots

The stacktrace window, full stacktrace can be found above.

Additional context or thoughts

swagger-viewer-react worked fine with nextjs until updating to the newer versions (downgrading to 5.3.2 fixes the issue).

I have tried following the nextjs instructions provided in the stacktrace but the only one I could affect (the use client option) didn't work.
Since the problem is specific to certain versions of swagger-ui (that doesn't seem to mention next-js or any relevant info in the changelog) the problem appears to be at this end.

[DGLcsGaming]

Same issue here

[thirdender]

I think this is an issue with the underlying swagger-js library extending the File class: https://github.com/swagger-api/swagger-js/blob/c70b071a1cb27e60d129816dd9c94af4a44033ca/src/http/index.js#L200

When using the <SwaggerUI /> React component in a Next.js project, the project launched and built as a static site successfully on my development machine with Node v20.7.0. When I copied the same code to another machine that only had Node v18.15.0, I started getting the error described in this issue.

From the working machine, node allows me to instantiate a new File class. From the non-working Node v18 machine, new File returns the error Uncaught ReferenceError: File is not defined.

MDN: File indicates that this class has been available in the browser for quite a while, so my guess is the issue is with the version of Node used to build Next.js site. Alternatively, the file I linked above looks like it's under active development, maybe this issue will go away with the implementation of undici for the Fetch polyfill: swagger-api/swagger-js@f341994#diff-df2ea73a8b28954468661416b485a053b8f9da01e163f0d2fa45787ef1874ecb

[ViddeM]

I tried your (@thirdender) suggestion of updating to the latest version of Node (v20.7.0) and that indeed seems to have solved the issue.
Thanks for the fix!

However, I still believe it's a problem that it does not work with the LTS version of Node (which is marked as recommended on their website) so I'll leave the issue open.

[char0n]

Hi everybody,

Please have a look at: https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools#nextjs

The POC repo contains recipe how to get Next.js get working with Node.js >= 16.

[afikrim]

Hi @char0n , the POC Repo that you're mentioning is using javascript, what if I used typescript? the swagger-ui-react package still not working in my project,

node: 18.x
next: 13.5.4
swagger-ui-react: 5.9.0

i also tried using node v16.x, but it's still not working. it is a bit of a problem since vercel only supports until node v18.x.

[char0n]

Hi @afikrim,

Added new table row to https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools#nextjs.

There is now a POC repo containing recipe how to get Next.js + TypeScript + swagger-ui-react get working with Node.js >= 16.

[sknightq]

Therefor we must using [email protected], otherwise, npm run build will throw eror in nextjs 13. Is right?

[char0n]

Therefor we must using [email protected], otherwise, npm run build will throw eror in nextjs 13. Is right?

Nope you don't. Have a look at https://github.com/char0n/swagger-ui-nextjs and the usage of ss-polyfill. There is no issue using Next.js + Node.js >= 16 building swagger-ui-react when applying the File server side polyfill.

package.json:

[freddywebmaster]

For next you can use class componnets only for client components you can import with dynamic and this fix the problem

import dynamic from "next/dynamic";

const DynamicSwaggerUI = dynamic(() => import("swagger-ui-react"), {
  ssr: false,
  loading: () => <p>Loading Component...</p>,
});

const AdminDocPage = () => {
  return <DynamicSwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />;
};

export default AdminDocPage;

[davulrich]

I've tried all possible solution mentioned above but only two options worked for me:

• Upgrade node from v18 to v20

  or

• Downgrade swagger-react-ui to v5.3.2

I choose the second option because release date is too close. After release I will upgrade node to v20.

[char0n]

HI @davulrich,

Solution described in #9243 (comment) must work for you on Node.js >= 16. But upgrading to Node.js >=20 is the easiest option anyway.

[davulrich]

https://github.com/char0n/swagger-ui-nextjs

I've just tried to use your polyfil file and it works! Thanks a lot. I will upgrade node to v20 asap after the release since it's optimal solution.

[Flip-Liquid]

Getting the same issue as OP using:

Next 14.1.4
swagger-ui-react 5.16.1
node 18.17.0

next 14 drops the undici distributable, so after including undici 5.24.0 to get the polyfill to work, I'm still getting the same

⨯ node_modules/swagger-ui-react/swagger-ui-bundle.js (2:819183) @ eval
⨯ Class extends value undefined is not a constructor or null

[char0n]

Hi @Flip-Liquid,

I've addressed support for next@14 in #9849

https://github.com/char0n/swagger-ui-nextjs is now directly runnable on [email protected].

[Flip-Liquid]

The issue persisted after using the node:buffer polyfill and also upgrading to Node v 20.

I was able to get it working by serving the Swagger UI using the pages router as opposed to the app router.

Any attempt to use the SwaggerUI component under the app router resulted in the same error

TypeError: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.

[char0n]

@Flip-Liquid I'm not seeing any of these errors in https://github.com/char0n/swagger-ui-nextjs

And related to React.Component - technically swagger-ui-react does support limited SSR, but SwaggerUI itself does not.

[Flip-Liquid]

Created a PR so you can see the delta:

char0n/swagger-ui-nextjs#5

Moving the Swagger UI page to the app router will resurface the issue, even if using Node v 20

[char0n]

@Flip-Liquid thanks, I can see it now.

[char0n]

@Flip-Liquid I've issued #9855 where I've rewritten the swagger-ui-react from class component to function component. I've tested with https://github.com/char0n/swagger-ui-nextjs (+ your draft PR changes) and seeing no issues.

I need a deep review for this PR. As a matter of fact, can I ask any participant of this issue to look at the PR?

Thanks!

[char0n]

SSR support released in https://github.com/swagger-api/swagger-ui/releases/tag/v5.17.0