swagger-api / swagger-api/swagger-ui
swagger-ui-react getting "TypeError: Object(...) is not a function" on POST, PUT, or DELETE
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure using the shown webpack.config.js and the .tsx entry point with swagger-ui-react 4.3.0, then inspect the bundled execute path in the browser stack trace. Done means POST, PUT, and DELETE requests execute without the TypeError while GET requests continue to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript, webpack
- Domain
- api, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100