swagger-ui: Swagger-ui-react not working with nextjs since 5.3.2

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. image

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.

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 13
  • Comments: 20 (9 by maintainers)

Commits related to this issue

Most upvoted comments

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;
+17
freddywebmaster on Dec 15, 2023

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.

+5
char0n on Oct 5, 2023

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: https://github.com/swagger-api/swagger-js/commit/f341994f19cfbd775b17d55c254f962d93c61e4b#diff-df2ea73a8b28954468661416b485a053b8f9da01e163f0d2fa45787ef1874ecb

+4
thirdender on Sep 27, 2023

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.

+1
davulrich on Mar 7, 2024

HI @davulrich,

Solution described in https://github.com/swagger-api/swagger-ui/issues/9243#issuecomment-1768027619 must work for you on Node.js >= 16. But upgrading to Node.js >=20 is the easiest option anyway.

+1
char0n on Mar 7, 2024

Therefor we must using swagger-ui-react@5.3.2, otherwise, npm run build will throw eror in nextjs 13. Is right?

+1
sknightq on Oct 18, 2023

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.

+1
char0n on Oct 3, 2023
Read more comments on GitHub
← swagger-ui: swagger-ui-react getting "TypeError: Object(...) is not a function" on POST, PUT, or DELETE
swagger-ui: swagger-ui-react "SyntaxError: Cannot use import statement outside a module" →