Outdated React version on integrating Swagger UI with React App

[neo7337]

Q&A (please complete the following information)

• OS: macOS
• Browser: chrome
• Version: Version 90.0.4430.85
• Method of installation: dist asset
• Swagger-UI version: 3.47.1
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

I have Swagger UI and Swagger Editor integrated with my React App but on checking the React Developer Tools, It gives an alert that the page is using an outdated version of React.
I know that npm dependencies of swagger-editor and swagger-ui both have the react dependency of v15.7.0 which can lead to this alert.
But I did try using the swagger-ui-dist and swagger-editor-dist, but no luck the react tools still say the outdated react version warning.

Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

import React from "react";
import SwaggerUIBundle from "swagger-ui-dist/swagger-ui-bundle"
import SwaggerUIStandalonePreset from "swagger-ui-dist/swagger-ui-standalone-preset"
import "swagger-ui-dist/swagger-ui.css"

export default function App() {

  React.useEffect(() => {
    const ui = SwaggerUIBundle({
      url: "https://petstore.swagger.io/v2/swagger.json",
      dom_id: '#swagger-ui',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      layout: "StandaloneLayout"
    })

    window.ui = ui
  })

  return (
    <div>
      <div id="swagger-ui"></div>
    </div>
  );
}

?yourQueryStringConfig

Screenshots

How can we help?

Is there a way to get rid of this outdated React version error on the app?

[hkosova]

Try using swagger-ui-react instead of swagger-ui-dist.

[neo7337]

@hkosova tried the swagger-ui-react as well. Same error!

[tim-lai]

Swagger UI 3.x is tied to React 15. This includes swagger-ui-react. There are known compatibility issues with React 16 and React 17. If you are using React 16/17, I recommend that you render the applications separately. Closing this issue in favor of #7341.