React 19 Compatibility with swagger-ui-react

[huraim]

Hello,

I'm planning to upgrade my project to React 19, but I am unable to proceed due to compatibility issues with the swagger-ui-react package.

Do you have plans to support React 19 in the near future? If so, could you share the expected timeline? Alternatively, is there any known workaround to address this issue?

Thank you for your assistance.

[HaakonW]

For React 19 support in Swagger UI, what’s the expected backwards compatibility? What’s the oldest React version needed to support? It is currently react": ">=16.8.0 <19. https://endoflife.date/react

[DoubleDebug]

Any updates on this?

[km2535]

Any updates on this?

nope :(

[antonina-nesmelova]

Are there any blockers?

[gmotzespina]

Any news?

[boredland]

For React 19 support in Swagger UI, what’s the expected backwards compatibility? What’s the oldest React version needed to support? It is currently react": ">=16.8.0 <19.

It's probably nice to support all versions still being security-patched. But I guess supporting the newest, actively supported version is more of a priority. Did someone try if it "just works" and we just need to update the range?

[rpoitras]

React v18 to v19 doesn't look terribly difficult - https://react.dev/blog/2024/04/25/react-19-upgrade-guide

But there are some changes required that will impact swagger-ui-react, like no more prop-types. There are codemods scripts available to help.

[rpoitras]

Correction, prop-types do not have to be removed, they will be ignored if present.

[Marujah]

any news?

[acelaya]

Can people just stop posting useless messages like "any news"? You are just spamming every person who's subscribed to this issue.

There are sensible messages in this thread which ARE the news, and are the indication of the status and progress. That's all you need.

If you can't or don't want to help here for whatever reason, just click "subscribe" and move on with your life.

[managervcf]

@acelaya You've just done the same thing mate, and it put hope in my heart, that something changed in this matter.

[huraim]

I couldn't wait any longer for swagger-ui-react to catch up with React 19, especially as I needed features from the latest Next.js 15 and React.

Assuming this package might continue lagging behind in future React updates, I migrated to swagger-ui-dist instead.

Here’s a simplified example of how I integrated swagger-ui-dist with Next.js.

// swagger.ts

import { createSwaggerSpec } from 'next-swagger-doc';

export async function getApiDocs() {
  const spec = createSwaggerSpec({
    apiFolder: 'src/app/<YOUR_ADDRESS>/apis',
    definition: {
      openapi: '3.0.0',
      info: {
        title: 'API Documentation',
        version: '1.0',
      },
    },
  });
  return spec;
}

// page.tsx

import { getApiDocs } from '@/src/<YOUR_ADDRESS>';
import PageContent from './page-content';
import { notFound } from 'next/navigation';

export default async function Page() {
  if (process.env.NODE_ENV !== 'development') notFound();
  const spec = await getApiDocs();

  return <PageContent spec={spec} />;
}

// page-content.tsx

'use client';

import { useEffect, useRef } from 'react';
import { SwaggerUIBundle } from 'swagger-ui-dist';
import 'swagger-ui-dist/swagger-ui.css';

export default function PageContent({ spec }: { spec: any }) {
  const swaggerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!swaggerRef.current || !spec) return;
    SwaggerUIBundle({
      domNode: swaggerRef.current,
      spec,
    });
  }, []);

  return <div className="swagger-ui-wrapper" ref={swaggerRef} />;
}

Hope this helps anyone in the same situation!

[isaackogan]

Thanks, I'm sad to switch away, but the warnings are bothering me.

[omridevk]

<div
  ref={(el) => {
    SwaggerUI.SwaggerUIBundle({
      spec: spec.spec,
      withCredentials: true,
      tryItOutEnabled: true,
      presets: [
        SwaggerUI.SwaggerUIBundle.presets.apis,
        SwaggerUI.SwaggerUIBundle.SwaggerUIStandalonePreset,
      ],
      // layout: 'StandaloneLayout',
      domNode: el,
    })
  }}
/>
</div>

remove the need to use useEffect

[glowcloud]

Hi everyone,

The latest release of Swagger UI adds initial support for React 19 by bumping the dependency version range. I will leave this issue open to track any problems that might arise - if you encounter any issues, please let us know here so we can address them.

[rpoitras]

Thank you @glowcloud for the support. Nice to see movement on this issue. I still am seeing some dependency complaints:

npm warn Could not resolve dependency:
npm warn peer react@"^15.3.0 || 16 || 17 || 18" from [email protected]
npm warn node_modules/react-copy-to-clipboard
npm warn   react-copy-to-clipboard@"5.1.0" from [email protected]
npm warn   node_modules/swagger-ui-react
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peer react@"^15.3.0 || 16 || 17 || 18" from [email protected]
npm warn   node_modules/react-copy-to-clipboard
npm warn     react-copy-to-clipboard@"5.1.0" from [email protected]
npm warn     node_modules/swagger-ui-react
npm warn ERESOLVE overriding peer dependency
npm warn   react-debounce-input@"=3.3.0" from [email protected]
npm warn   node_modules/swagger-ui-react
npm warn                   
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peer react@"^15.3.0 || 16 || 17 || 18" from [email protected]
npm warn   node_modules/react-debounce-input
npm warn     react-debounce-input@"=3.3.0" from [email protected]
npm warn     node_modules/swagger-ui-react
npm warn                                    
npm warn Could not resolve dependency:
npm warn peer react@"^16.8.4 || ^17.0.0 || ^18.0.0" from [email protected]
npm warn node_modules/react-inspector
npm warn   react-inspector@"^6.0.1" from [email protected]
npm warn   node_modules/swagger-ui-react
npm warn                   
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peer react@"^16.8.4 || ^17.0.0 || ^18.0.0" from [email protected]
npm warn   node_modules/react-inspector
npm warn     react-inspector@"^6.0.1" from [email protected]
npm warn     node_modules/swagger-ui-react