Swagger UI React - Legacy Lifecycle Warning

Open teetangh opened this issue 3 weeks ago • 1 comments

Swagger UI React - Legacy Lifecycle Warning

Issue Description

When running the application in development mode, the following console warning appears:

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: ParameterRow

Root Cause

This warning originates from the swagger-ui-react library (v5.30.3), not from application code. The library internally uses legacy React lifecycle methods that trigger strict mode warnings.

Investigation Summary

Library: [email protected]
Status: Latest available version
Component: ParameterRow (internal to swagger-ui-react)
File: app/api-doc/react-swagger.tsx (our wrapper component is fine)

Impact Assessment

✅ What is NOT affected:

Production builds (warning only appears in dev mode)
Application functionality (Swagger UI works correctly)
Performance
Security
Build process
Test suite

⚠️ What IS affected:

Development console output (cosmetic only)
React strict mode compliance

Options

Option 1: Leave As-Is (Recommended)

Rationale:

This is a third-party library issue, not application code
No functional impact
Common across all projects using swagger-ui-react
Warning only appears in development

Action Required: None

Pros:

No code changes needed
No maintenance burden
Follows upstream library directly

Cons:

Warning remains visible in dev console

Option 2: Suppress the Warning

Add webpack configuration to suppress warnings from the swagger-ui-react module.

Implementation:

// next.config.mjs
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    "react-syntax-highlighter",
    "swagger-client",
    "swagger-ui-react",
  ],
  serverExternalPackages: ["couchbase"],

  // Suppress known third-party warnings
  webpack: (config) => {
    config.ignoreWarnings = [
      {
        module: /node_modules\/swagger-ui-react/,
        message: /UNSAFE_componentWillReceiveProps/,
      },
    ];
    return config;
  },
}

export default nextConfig

Pros:

Cleaner development console
Focused on actionable warnings

Cons:

Adds custom webpack config
Might mask future issues in the library
Requires maintenance if warning patterns change

Option 3: Replace Swagger UI Library

Replace swagger-ui-react with an alternative API documentation solution.

Alternatives:

Scalar: Modern API documentation (https://github.com/scalar/scalar)
Redoc: Alternative OpenAPI viewer (https://github.com/Redocly/redoc)
Custom solution: Build lightweight API docs viewer

Pros:

Full control over implementation
Modern React patterns
Potentially better performance

Cons:

Significant refactoring required
May lose Swagger UI features
Additional development time
Testing required

Option 4: Monitor Upstream

Track the swagger-ui-react repository for updates that address this issue.

Tracking:

Repository: https://github.com/swagger-api/swagger-ui
Search issues for: "componentWillReceiveProps" or "lifecycle"
Monitor releases: https://github.com/swagger-api/swagger-ui/releases

Action Items:

Subscribe to repository releases
Check release notes for React lifecycle updates
Upgrade when fixed version is available

Timeline: Unknown - depends on upstream maintainers

Recommendation

Adopt Option 1 (Leave As-Is) with Option 4 (Monitor Upstream).

Reasoning:

The warning has no functional impact
Common across all swagger-ui-react users
No code changes needed
Can upgrade when upstream fixes the issue

Additional Context:

This is a known limitation of swagger-ui-react
The library maintainers are aware of React 18+ compatibility
Many production applications run with this warning
React team has kept these warnings for years without removing the APIs

Related Files

app/api-doc/react-swagger.tsx - Swagger UI wrapper component
app/api-doc/page.tsx - API documentation page
lib/swagger.ts - OpenAPI specification generator
next.config.mjs - Next.js configuration (if implementing Option 2)

References

Decision

Status: Open Assigned: N/A Priority: Low (cosmetic dev warning only) Target Resolution: Monitor upstream, upgrade when available

Last Updated: 2025-12-02 Next Review: When swagger-ui-react releases new version

Dec 02 '25 11:12 teetangh

GitHub Issue for swagger-ui-react

Repository: https://github.com/swagger-api/swagger-ui/issues/new

Q&A (please complete the following information)

OS: macOS (Darwin 24.6.0)
Browser: Chrome (latest), Safari (latest)
Version: Latest
Method of installation: npm
Swagger-UI version: 5.30.3 (swagger-ui-react)
Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0
paths:
  /api/example:
    get:
      summary: Example endpoint
      responses:
        200:
          description: Success

Swagger-UI configuration options:

// app/api-doc/react-swagger.tsx
"use client"

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

type Props = {
  spec: Record<string, any>
}

function ReactSwagger({ spec }: Readonly<Props>) {
  return <SwaggerUI spec={spec} />
}

export default ReactSwagger

Describe the bug you're encountering

When using [email protected] in a Next.js 15 application with React 18.3.1 and reactStrictMode: true, the following warning appears in the development console:

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: ParameterRow

The warning originates from the ParameterRow component inside swagger-ui-react, which is still using the legacy UNSAFE_componentWillReceiveProps lifecycle method.

To reproduce...

Steps to reproduce the behavior:

Create a Next.js 15 application with reactStrictMode: true in next.config.mjs
Install [email protected]
Create a component that renders <SwaggerUI spec={spec} />
Run the application in development mode (npm run dev)
Open the browser console
Navigate to the page with Swagger UI
See the warning in the console

Minimal reproduction repository: (can provide if needed)

Expected behavior

Swagger UI should not trigger React strict mode warnings. The component should use modern React lifecycle methods:

Replace UNSAFE_componentWillReceiveProps with componentDidUpdate or getDerivedStateFromProps
Or refactor to use React Hooks (functional components)

Screenshots

Console warning:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended...
Please update the following components: ParameterRow

Additional context or thoughts

Impact:

This warning only appears in development mode with React strict mode enabled
No functional issues - Swagger UI works correctly
Does not affect production builds
However, it pollutes the development console and may mask other important warnings

Environment details:

React: 18.3.1
Next.js: 15.2.2
swagger-ui-react: 5.30.3
Node.js: 22.21.1

Possible solutions:

Update ParameterRow and other affected components to use componentDidUpdate or static getDerivedStateFromProps
Refactor to functional components with hooks
At minimum, rename to UNSAFE_componentWillReceiveProps is already done, but the warning still appears because React strict mode flags all UNSAFE_ methods

Related:

This affects all users of swagger-ui-react who have React strict mode enabled
The issue has likely existed since React 16.3 when these lifecycle methods were deprecated
React 18+ strict mode makes these warnings more prominent

Workaround for users: Users can suppress this warning by adding webpack configuration, but this is not ideal:

// next.config.mjs
webpack: (config) => {
  config.ignoreWarnings = [
    { module: /node_modules\/swagger-ui-react/, message: /UNSAFE_componentWillReceiveProps/ }
  ];
  return config;
}

Thank you for maintaining this excellent library! 🙏

Dec 02 '25 11:12 teetangh