Swagger UI React - Legacy Lifecycle Warning

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

Start by reading app/api-doc/react-swagger.tsx, app/api-doc/page.tsx, lib/swagger.ts, and next.config.mjs, then verify the warning against swagger-ui-react 5.30.3. There is no defined local fix; completion would require an upstream lifecycle fix and a compatible dependency upgrade, or an agreed decision to change the integration.