swagger-api
Getting UNSAFE_componentWillReceiveProps error when using Next.js 15 / React 19
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:
- Go to the Swagger UI page
- Page throws an error
Expected behavior
No error
Screenshots
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?
Hi all,
I see we have a partial community fix in https://github.com/swagger-api/swagger-ui/pull/10373. I'll review and merge that. Please do help with more PR porting to UNSAFE_ life cycle hooks to new alternatives.
Same issue. Info: https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
@petergoldstein as a alternative you can check next-openapi-gen. It uses scalar as a default UI which supports latest versions of nextjs and react.
Reopening this issue as it was only partially addressed by https://github.com/swagger-api/swagger-ui/pull/10373. There are still some components using the deprecated lifecycle methods.
:tada: This issue has been resolved in version 5.29.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
