swagger-api / swagger-api/swagger-ui
Unable to render swagger UI with json input in customised webpack configured react
Open
@char0n is already working on this.
Since Nov 8, 2021.
type: support
version: 4.x
- 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: macOS
- Browser: chrome
- Method of installation: npm
- Swagger-UI version: 3.52.5
- Swagger/OpenAPI version: OpenAPI 3.0
Describe the bug you're encountering
Once the component is loaded on the screen, we saw following error
Along with error from console
VM363 react_devtools_backend.js:2528 TypeError: z.a.load is not a function
at swagger-ui.js:2
at Object.dispatch (swagger-ui.js:2)
at dispatch (<anonymous>:14608:80)
at Object.parseToJson (bindActionCreators.js:3)
at swagger-ui.js:2
at r (swagger-ui.js:2)
at swagger-ui.js:2
at swagger-ui.js:2
at Object.r (swagger-ui.js:2)
at Object.updateSpec (swagger-ui.js:2) '\n at SwaggerUI (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at div\n at div\n at exports.ProviderContract (http://localhost:3000/static/js/bundle.js:391392:36)\n at div\n at Transition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at CSSTransition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at TabPanel (http://localhost:3000/static/js/bundle.js:119781:24)\n at TransitionGroup (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at PanelGroup (http://localhost:3000/static/js/bundle.js:119586:25)\n at div\n at TabPanels (http://localhost:3000/static/js/bundle.js:119884:24)\n at TabsManager (http://localhost:3000/static/js/bundle.js:120243:21)\n at ./src/components/shared/pact-tab/index.tsx.exports.PactTabs (http://localhost:3000/static/js/bundle.js:401180:23)\n at BDCIndex (http://localhost:3000/static/js/bundle.js:390077:21)\n at div\n at Transition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at CSSTransition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at TabPanel (http://localhost:3000/static/js/bundle.js:119781:24)\n at TransitionGroup (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at PanelGroup (http://localhost:3000/static/js/bundle.js:119586:25)\n at div\n at TabPanels (http://localhost:3000/static/js/bundle.js:119884:24)\n at TabsManager (http://localhost:3000/static/js/bundle.js:120243:21)\n at div\n at PactDashboard (http://localhost:3000/static/js/bundle.js:387787:26)\n at C (http://localhost:3000/static/js/bundle.js:310901:37)\n at main\n at LayoutMain (http://localhost:3000/static/js/bundle.js:40707:28)\n at MiniLayoutWrapper (http://localhost:3000/static/js/bundle.js:41451:19)\n at LayoutChildren (http://localhost:3000/static/js/bundle.js:40526:17)\n at LayoutProvider (http://localhost:3000/static/js/bundle.js:41226:21)\n at Layout (http://localhost:3000/static/js/bundle.js:40268:17)\n at Landing (http://localhost:3000/static/js/bundle.js:387637:20)\n at C (http://localhost:3000/static/js/bundle.js:310901:37)\n at Route (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at Switch (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at ErrorBoundary (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at FormThemeProvider (http://localhost:3000/static/js/bundle.js:33649:17)\n at IconProvider (http://localhost:3000/static/js/bundle.js:39767:23)\n at HoverModeProvider (http://localhost:3000/static/js/bundle.js:125676:23)\n at StatesConfig (http://localhost:3000/static/js/bundle.js:117433:17)\n at UserInteractionModeListener (http://localhost:3000/static/js/bundle.js:127180:23)\n at NestedDialogContextProvider (http://localhost:3000/static/js/bundle.js:32474:23)\n at AppSizeListener (http://localhost:3000/static/js/bundle.js:129135:23)\n at Dir (http://localhost:3000/static/js/bundle.js:124755:23)\n at Configuration (http://localhost:3000/static/js/bundle.js:40129:26)\n at App\n at AppContainer (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at HotExportedApp (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at http://localhost:3000/static/js/bundle.js:400809:89\n at ConnectFunction (http://localhost:3000/static/js/bundle.js:308431:75)\n at http://localhost:3000/static/js/bundle.js:386395:28\n at ConnectFunction (http://localhost:3000/static/js/bundle.js:308431:75)\n at Router (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)\n at Provider (http://localhost:3000/static/js/bundle.js:308144:20)'
Transformer error: TypeError: Cannot read properties of undefined (reading 'indexOf')
at e.exports (swagger-ui.js:2)
at swagger-ui.js:2
at immutable.js:3016
at List.__iterate (immutable.js:2206)
at IndexedIterable.mappedSequence.__iterateUncached (immutable.js:3015)
at seqIterate (immutable.js:604)
at IndexedIterable.IndexedSeq.__iterate (immutable.js:320)
at IndexedIterable.toArray (immutable.js:4258)
at List [as constructor] (immutable.js:2065)
at reify (immutable.js:3570)
at SwaggerUI (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)
at div
at div
at exports.ProviderContract (http://localhost:3000/static/js/bundle.js:391392:36)
at div
at Transition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)
at CSSTransition (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)
at TabPanel (http://localhost:3000/static/js/bundle.js:119781:24)
at TransitionGroup (eval at ES6ProxyComponentFactory (http://localhost:3000/static/js/bundle.js:298649:10), <anonymous>:14:7)
at PanelGroup (http://localhost:3000/static/js/bundle.js:119586:25)
at div
....
Content & configuration
swagger json playload:
export const swagger = {
"openapi": "3.0.1",
"info": {
"title": "Product API",
"description": "Pactflow Product API demo",
"version": "1.0.0"
},
"paths": {
"/products": {
"post": {
"summary": "Create a product",
"description": "Creates a new product",
"operationId": "createProduct",
"requestBody": {
"description": "Create a new Product",
"required": true,
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Product"
},
"examples": {
"application/json": {
"value": {
"color": "yellow"
}
}
}
}
}
},
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json; charset=utf-8": {
"schema": {
"oneOf": [
{
"$ref": "#/components/schemas/Product"
}
]
},
"examples": {
"application/json": {
"value": {
"id": "1234",
"type": "food",
"price": 42
}
}
}
}
}
}
}
},
"get": {
"summary": "List all products",
"description": "Returns all products",
"operationId": "getAllProducts",
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json; charset=utf-8": {
"schema": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Product"
}
},
"examples": {
"application/json": {
"value": [
{
"id": "1234",
"type": "food",
"price": 42
}
]
}
}
}
}
},
"400": {
"description": "Invalid ID supplied",
"content": {}
}
}
}
},
"/product/{id}": {
"get": {
"summary": "Find product by ID",
"description": "Returns a single product",
"operationId": "getProductByID",
"parameters": [
{
"name": "id",
"in": "path",
"description": "ID of product to get",
"schema": {
"type": "string"
},
"required": true,
"example": 10
}
],
"responses": {
"200": {
"description": "successful operation",
"content": {
"application/json; charset=utf-8": {
"schema": {
"$ref": "#/components/schemas/Product"
},
"examples": {
"application/json": {
"value": {
"id": "1234",
"type": "food",
"price": 42
}
}
}
}
}
},
"400": {
"description": "Invalid ID supplied",
"content": {}
},
"404": {
"description": "Product not found",
"content": {}
}
}
}
}
},
"components": {
"schemas": {
"Product": {
"type": "object",
"required": [
"id",
"name",
"price"
],
"additionalProperties": false,
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string"
},
"name": {
"type": "string"
},
"version": {
"type": "string"
},
"price": {
"type": "number"
}
}
}
}
}
}
Swagger-UI configuration options:
<SwaggerUI spec={swagger} />
Expected behavior
Swagger should be rendered without error
Screenshots
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.
Assessment
This issue has not been assessed yet.