Swagger UI React - Legacy Lifecycle Warning

[teetangh]

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: swagger-ui-react@5.30.3
• 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:

1. Subscribe to repository releases
2. Check release notes for React lifecycle updates
3. 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:

1. The warning has no functional impact
2. Common across all swagger-ui-react users
3. No code changes needed
4. 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

• React Legacy Lifecycle Methods
• swagger-ui-react Documentation
• Next.js Custom Webpack Config

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

[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 swagger-ui-react@5.30.3 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:

1. Create a Next.js 15 application with reactStrictMode: true in next.config.mjs
2. Install swagger-ui-react@5.30.3
3. Create a component that renders <SwaggerUI spec={spec} />
4. Run the application in development mode (npm run dev)
5. Open the browser console
6. Navigate to the page with Swagger UI
7. 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:

1. Update ParameterRow and other affected components to use componentDidUpdate or static getDerivedStateFromProps
2. Refactor to functional components with hooks
3. 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! 🙏