Using older version of React

Important

By older versions we specifically refer to React >= 16.8 <18.

By default swagger-ui and swagger-ui-react npm packages come with latest version of React@18. It's possible to use both swagger-ui and swagger-ui-react npm packages with older version of React.

Let's say my application integrates with swagger-ui npm package and uses [email protected].

npm

In order to inform swagger-ui npm package that I require it to use my React version, I need to use npm overrides.

{
  "dependencies": {
    "react": "=17.0.2",
    "react-dom": "=17.0.2"
  },
  "overrides": {
    "swagger-ui": {
      "react": "$react",
      "react": "$react-dom",
      "react-redux": "^8"
    }
  }
}

It works the same for swagger-ui-react npm package:

{
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "overrides": {
    "swagger-ui-react": {
      "react": "$react",
      "react": "$react-dom",
      "react-redux": "^8"
    }
  }
}

Note

The React and ReactDOM override are defined as a reference to the dependency. Since react-redux@9 only supports React >= 18, we need to use react-redux@8.

yarn

In order to inform swagger-ui npm package that I require it to use my specific React version, I need to use yarm resolutions.

{
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "resolutions": {
    "swagger-ui/react": "17.0.2",
    "swagger-ui/react-dom": "17.0.2",
    "swagger-ui/react-redux": "^8"
  }
}

It works the same for swagger-ui-react npm package:

{
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "resolutions": {
    "swagger-ui-react/react": "17.0.2",
    "swagger-ui-react/react-dom": "17.0.2",
    "swagger-ui-react/react-redux": "^8"
  }
}

Note

The React and ReactDOM resolution cannot be defined as a reference to the dependency. Unfortunately yarn does not support aliasing like $react or $react-dom as npm does. You'll need to specify the exact versions.