Getting TypeError: `s is not a function`after upgrading to v5.11.0

[PenghaiZhang]

Q&A (please complete the following information)

• OS: Ubuntu 22
• Browser: Chrome
• Version: 135.0.7049.114
• Method of installation: [e.g. npm, dist assets]
• Swagger-UI version: 5.11.0
• Swagger/OpenAPI version: N/A

Content & configuration

Swagger-UI configuration options:

SwaggerUI({
  dom_id: "#swagger-ui",
  url: $("base").attr("href") + "api/swagger.yaml",
});

Describe the bug you're encountering

We are trying to upgrade swagger-ui from v4 to v5. It was OK when we upgraded to v5.10.5. But since v5.11.0, there is a type error occurring when we access the page.

It appears the error could be related to React, but our project is a pretty small one which does not use React in any way. We simply use webpack to generate a JS bundle file to be consumed in some html pages.

This is our webpack config.

This is the package.json file.

This is how we use the js bundle file.

To reproduce...

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

The page should be correctly displayed.

Screenshots

With 5.11.0:

With 5.10.5:

[glowcloud]

Hi @PenghaiZhang ,

I could not reproduce this issue on my end. Could you check if it still occurs for you with the latest release of Swagger UI? From the stack trace, it looks like the error might be related to the downloadSpec function, which was rewritten and merged into another function. These changes might have resolved your issue.

[PenghaiZhang]

Hi @PenghaiZhang ,

I could not reproduce this issue on my end. Could you check if it still occurs for you with the latest release of Swagger UI? From the stack trace, it looks like the error might be related to the downloadSpec function, which was rewritten and merged into another function. These changes might have resolved your issue.

Hi @glowcloud we have tried 5.25.x and 5.26.2, and still have this error. Could this be related to Webpack ?

Update

I tried 5.26.2 again, and found the stacktrace have changed, but eventually I got the same error.

[PenghaiZhang]

So looks like s refers to the React.createRoot function which becomes undefined for some reasons.

[PenghaiZhang]

I just found that maybe the version of react is wrong. I think it should be v18 but what I have is v17.

Dep tree for react:

swaggerui@ /home/work/swaggerui └─┬ [email protected] ├─┬ [email protected] │ └── [email protected] ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped └── [email protected]

[PenghaiZhang]

I added react and react-dom v18 in my package.json although I did not need these two deps, and then the page kind of worked with this warning:

react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

Also the text in the page seems broken - texts are displayed vertically.

[glowcloud]

Could there be an issue with the CSS load order?

I also uploaded a project based on most of the configuration provided here, if you would like to check if you have any problems there as well. There was no need for the additional react or react-dom dependencies to make it work. Perhaps completely regenerating package-lock and node_modules would help?

[lowkeycode]

fwiw Hitting this in an Angular 2 project as well moving from 14.19.1 to 5.28.0. Regenerating the package-lock and node_modules had no effect

[sunio00000]

i got same issue in 5.28.1

OS: Win 11 Browser: Chrome Version: 140.0.7339.80 Method of installation: pnpm Swagger-UI version: 5.28.1 Swagger/OpenAPI version: 3.0.1

[lowkeycode]

My solve was using the steps laid out in this blog post for any Angular projects out there https://stackademic.com/blog/how-to-embed-swagger-ui-into-angular. Looks like I had outdated imports SwaggerUI -> SwaggerUIBundle among a few other things

[sunio00000]

i got same issue in 5.28.1

OS: Win 11 Browser: Chrome Version: 140.0.7339.80 Method of installation: pnpm Swagger-UI version: 5.28.1 Swagger/OpenAPI version: 3.0.1

this issue disappeared by package downgrade version and revert version to 5.28.1.

but IDK why it happened.

[dpgiakatos]

I had the same error. I solved it by using the swagger-ui-dist package.

[lBeJIuk]

I've had the same problem. In my case, it was something wrong with my package-lock.json (perhaps because of renovate autoupdate). I rolled back to one of the old versions, ran npm-check -u to update dependencies, and then it worked for me.

[glowcloud]

Hi all,

if anyone is still running into this issue, I think I know what causes it and how it could be solved.

• Swagger UI 5.10.5 specifies React and ReactDOM version 17.0.2.
• Swagger UI 5.11.0 adds support for React 18 by specifying a version range for both React and ReactDOM.
• In Swagger UI 5.11.0, React Redux is updated to version 9.0.4, which requires React version 18 or 19, but does not specify a version for ReactDOM.
• As a result, when updating Swagger UI to 5.11.0, React is bumped to version 18 but ReactDOM stays at 17.
• We now have mismatched versions of React and ReactDOM. Our fallback View Legacy plugin for React versions < 18 will not work as it only checks for React version. If React has version 18, the fallback is not used and rendering will fail, because ReactDOM is still at 17.

There might be a few ways to solve this without having to use Swagger UI Dist:

1. Run npm update - in my case ReactDOM was updated to version 18.
2. Use an override for React Redux as specified in this guide, without installing React and ReactDOM. This will keep React at version 17, unless there are other dependencies requiring a higher version.

   "overrides": {
     "swagger-ui": {
       "react-redux": "^8"
     }
   }
   

3. Install React and ReactDOM version 18.
4. Regenerate package-lock.json and node_modules.

[peter-at-work]

In our case (building a swagger-ui static site from scratch), the transitive react-dom dependency that was getting installed was some version ^19 (the latest). Installing a direct dependency on react-dom@^18 and then regenerating the lock file has pinned it back to some version ^18.

[edalex-ian]

Pinning react-dom to v18 also seemed to fix it for us:

$ git diff package.json
@@ -7,6 +7,7 @@
     "dev": "webpack watch --mode development"
   },
   "dependencies": {
+    "react-dom": "^18",
     "swagger-ui": "5.29.4"
   },
   "devDependencies": {

(In this process we also completely rebuilt package-lock.json.)

[berkhoutalex]

It looks there is a reference to createRoot from "react-dom" that is deprecated in React 19. Using react 18.3, I can see "Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"." and then upgrading to react 19 causes it to crash because that import no longer exists. I think if we can switch to importing createRoot from react-dom/client, this should allow it work with React 19.

Are there any concerns with making that change?

[adelinn]

I just encountered this error too. A fix would be much appreciated. 🙏