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
└─┬ swagger-ui@5.26.2
├─┬ react-copy-to-clipboard@5.1.0
│ └── react@17.0.2
├─┬ react-debounce-input@3.3.0
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-immutable-pure-component@2.2.2
│ └── react@17.0.2 deduped
├─┬ react-inspector@6.0.1
│ └── react@17.0.2 deduped
├─┬ react-redux@9.2.0
│ ├── react@18.3.1 deduped
│ └─┬ use-sync-external-store@1.5.0
│ └── react@17.0.2 deduped
├─┬ react-syntax-highlighter@15.6.1
│ └── react@17.0.2 deduped
└── react@18.3.1

[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?