Getting UNSAFE_componentWillReceiveProps error when using Next.js 15 / React 19

[petergoldstein]

Q&A (please complete the following information)

• OS: macOS
• Browser: Chrome 130.0.6723.117
• Method of installation: pnpm
• Swagger-UI version: 5.18.2
• Swagger/OpenAPI version: Swagger 2.0, OpenAPI 3.1.0

Content & configuration

I'm using a vanilla Swagger Page inside a Next.js 15 / React 19 application:

"use client";

import { useEffect, useState } from "react";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

function SwaggerPage() {
  const [spec, setSpec] = useState<any>(null);

  useEffect(() => {
    fetch("/api/swagger")
      .then((response) => response.json())
      .then((data) => setSpec(data));
  }, []);

  if (!spec) {
    return <div>Loading...</div>;
  }

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

export default SwaggerPage;

Describe the bug you're encountering

I'm seeing the following error starting in Swagger-UI 5.18.0 and continuing through 5.18.2 on my Swagger page:

Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://react.dev/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state

Please update the following components: OperationContainer

To reproduce...

Steps to reproduce the behavior:

1. Go to the Swagger UI page
2. Page throws an error

Expected behavior

No error

Screenshots

[tazo90]

Next.js 15 uses Strict Mode by default, which is why we encountered this issue.
swagger-ui-react still uses the deprecated UNSAFE_componentWillReceiveProps in several places.

Is there a possibility to refactor them?

[harmonicaCz]

Same problem as well