swagger-ui: swagger-ui-react getting "TypeError: Object(...) is not a function" on POST, PUT, or DELETE

Q&A (please complete the following information)

OS: Windows 10
Browser: Edge, Chrome, Firefox
Version: Lastest browser versions as of 25-Jan-2022 @ 11:30AM EST
Method of installation: npm install swagger-ui-react
Swagger-UI version: 4.3.0
Swagger/OpenAPI version: Don’t know?

Content & configuration

Since I’m using webpack 5, I had to add polyfills for stream and buffer in webpack.config.js:

const webpack = require('webpack');
...
, plugins: [
  ...
  , new webpack.ProvidePlugin({
    Buffer: ["buffer", "Buffer"]
  })
]
, resolve: {
    ...
    , fallback: {
      stream: require.resolve("stream-browserify")
      , buffer: require.resolve("buffer")
    }
}

The html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Issuetrak API v2</title>
    <script src="core/Scripts/require.js" data-main="core/Scripts/swagger/app"></script>
</head>

<body>
    <div id="swagger-ui"></div>
</body>
</html>

The entry .tsx:

import * as ReactDOM from "react-dom";
import React from "react";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

const swaggerElement = document.querySelector("#swagger-ui");
if (swaggerElement) {
    ReactDOM.render(
        <SwaggerUI
            url="api/v2/swagger/v2/swagger.json"
        />
        , swaggerElement
    );
}

Describe the bug you’re encountering

The swagger page is loading just fine, and displays all our end points. When I click the [Try it out] button for an endpoint that is POST, PUT, or DELETE, and fill in any parameters and click the [Execute] button, I get the following error in the console and no network request is made.

TypeError: Object(...) is not a function
    at Object.nn [as execute] (swagger-ui.js:2214:330)
    at swagger-ui.js:315:160
    at Object.dispatch (swagger-ui.js:36:687)
    at dispatch (<anonymous>:10608:80)
    at redux.js:469:1
    at swagger-ui.js:1228:375
    at Object.r (swagger-ui.js:3815:414)
    at Object.executeRequest (swagger-ui.js:3859:1)
    at swagger-ui.js:315:1041
    at Object.dispatch (swagger-ui.js:36:687)

GET api end points work fine.

To reproduce…

Steps to reproduce the behavior: You can try setting up the same scenario I have. The relevant webpack.config.js as well as .html and entry .tsx are listed above, change the url="..." in the .tsx to a valid swagger.json. No idea if it will recreate the bug outside of my development environment and with a different api.

Navigate to the the .html file, expand a “POST”, “PUT”, or “DELETE” endpoint, click [Try it out], fill in any relevant parameters, click [Execute], see the error in the developer tools console.

Expected behavior

When I click [Execute], I expect a network call to the api endpoint to be made and no JavaScript error in the developer tools console.

Screenshots

Additional context or thoughts

Our normal swagger page is working fine. It’s accessed via the url api/v2/swagger/index.html and is configured in our c# code using Swashbuckle UI. This new swagger page we’re trying to get working will be accessed just by apiv2.swagger.html (from the root of the site, not from api/v2/swagger) and loads a react app via a <script src="core/Scripts/require.js" data-main="core/Scripts/swagger/app"></script> tag. The reason we’re doing this is so we can add our menuing framework (left and right side menus, and a top-bar) around the swagger ui. Our menu components are all React.

About this issue

Original URL
State: open
Created 2 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

what seemed to help in my case is to install is-plain-object as dependency in my project. Somehow webpack seems to then properly pick it up.

+10

NoobSkywalker on Feb 14, 2022

@NoobSkywalker thank you!!!

I installed is-plain-object and now it works. Thanks a lot!

mauretto78 on Mar 17, 2022