Swagger UI throws error if the api spec has circular references

[x-du]

Q&A

• OS: macOS
• Browser: chrome
• Version: 88.0.4324.150
• Method of installation: testing with npm run dev
• Swagger-UI version: 3.44.1 dev
• Swagger/OpenAPI version: OpenAPI 3.0.1

Content & configuration

I made an example in this fork. https://github.com/x-du/swagger-ui

Example Swagger/OpenAPI definition:

https://github.com/x-du/swagger-ui/blob/CircularReferBug/dev-helpers/openapi.json

Swagger-UI configuration options: https://github.com/x-du/swagger-ui/blob/CircularReferBug/dev-helpers/index.html

const ui = SwaggerUIBundle({
        url: "./openapi.json",
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [],
        layout: "StandaloneLayout"
      })

Describe the bug you're encountering

If the api spec has circular references, Swagger UI will show errors when the api request is selected.

To reproduce...

Steps to reproduce the behavior:

1. Run npm run dev
2. Click on any api on the page.
3. You will see errors.

Expected behavior

There should not be any error. Circular referencing is valid in spec. The sample api spec validates fine in Swagger Editor

Error Message

index.js:389 TypeError: Cannot read property '1' of undefined
    at applyOperation (core.mjs:238)
    at Module.applyPatch (core.mjs:270)
    at Object.applyPatch (index.js:122)
    at SpecMap.updateMutations (index.js:402)
    at index.js:384
    at Array.forEach (<anonymous>)
    at SpecMap.updatePatches (index.js:351)
    at updatePatches (index.js:610)
    at executePlugin (index.js:581)
    at SpecMap.dispatch (index.js:565)
(anonymous) @ index.js:389
updatePatches @ index.js:351
updatePatches @ index.js:610
executePlugin @ index.js:581
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
(anonymous) @ index.js:560
Promise.then (async)
dispatch @ index.js:559
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
executePlugin @ index.js:604
dispatch @ index.js:565
mapSpec @ index.js:630
doResolve @ resolver.js:89
resolve @ resolver.js:62
_callee$ @ index.js:69
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:15
(anonymous) @ asyncToGenerator.js:23
resolveSubtree @ index.js:31
resolveSubtree @ index.js:26
_callee2$ @ actions.js:179
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:15
(anonymous) @ asyncToGenerator.js:23
(anonymous) @ actions.js:177
_callee3$ @ actions.js:177
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:15
(anonymous) @ asyncToGenerator.js:23
invokeFunc @ debounce.js:95
trailingEdge @ debounce.js:144
timerExpired @ debounce.js:132
setTimeout (async)
leadingEdge @ debounce.js:103
debounced @ debounce.js:172
(anonymous) @ actions.js:266
(anonymous) @ utils.js:196
(anonymous) @ bindActionCreators.js:3
(anonymous) @ OperationContainer.jsx:154
(anonymous) @ OperationContainer.jsx:112
boundFunc @ ReactErrorUtils.js:63
./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:83
executeDispatchesInOrder @ EventPluginUtils.js:106
executeDispatchesAndRelease @ EventPluginHub.js:41
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:52
forEachAccumulated @ forEachAccumulated.js:22
processEventQueue @ EventPluginHub.js:252
runEventQueueInBatch @ ReactEventEmitterMixin.js:15
handleTopLevel @ ReactEventEmitterMixin.js:25
handleTopLevelImpl @ ReactEventListener.js:70
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145
Show 21 more frames
system.js:464 RangeError: Maximum call stack size exceeded
    at OrderedMap.Map.withMutations (immutable.js:1351)
    at Object.OrderedMap (immutable.js:2648)
    at fromJSOrdered (utils.js:90)
    at immutable.js:3016
    at immutable.js:2699
    at List.__iterate (immutable.js:2206)
    at OrderedMap.__iterate (immutable.js:2698)
    at KeyedIterable.mappedSequence.__iterateUncached (immutable.js:3015)
    at seqIterate (immutable.js:604)
    at KeyedIterable.Seq.__iterate (immutable.js:274)
(anonymous) @ system.js:464
(anonymous) @ system.js:443
(anonymous) @ combineReducers.js:39
(anonymous) @ combineReducers.js:36
Map.withMutations @ immutable.js:1353
(anonymous) @ combineReducers.js:35
dispatch @ createStore.js:165
(anonymous) @ utils.js:199
(anonymous) @ bindActionCreators.js:3
_callee3$ @ actions.js:250
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
(anonymous) @ asyncToGenerator.js:34
Wrapper @ export.js:15
(anonymous) @ asyncToGenerator.js:23
invokeFunc @ debounce.js:95
trailingEdge @ debounce.js:144
timerExpired @ debounce.js:132
setTimeout (async)
leadingEdge @ debounce.js:103
debounced @ debounce.js:172
(anonymous) @ actions.js:266
(anonymous) @ utils.js:196
(anonymous) @ bindActionCreators.js:3
(anonymous) @ OperationContainer.jsx:154
(anonymous) @ OperationContainer.jsx:112
boundFunc @ ReactErrorUtils.js:63
./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:83
executeDispatchesInOrder @ EventPluginUtils.js:106
executeDispatchesAndRelease @ EventPluginHub.js:41
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:52
forEachAccumulated @ forEachAccumulated.js:22
processEventQueue @ EventPluginHub.js:252
runEventQueueInBatch @ ReactEventEmitterMixin.js:15
handleTopLevel @ ReactEventEmitterMixin.js:25
handleTopLevelImpl @ ReactEventListener.js:70
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145

[kyle-apex]

For those struggling with this who would like a temporary workaround, change your configuration from a relative reference to specify a full url instead

// from this:
const ui = SwaggerUIBundle({ url: './openapi.json',
// to this:
const ui = SwaggerUIBundle({ url: 'https://myurl.com/openapi.json',

[Thomas-WB]

We are also facing this issue in 5.10.3, even with full urls.