SwaggerUI embedded in node.js app

Q&A

• OS: [macOS - 10.13.5]
• Browser: [chrome]
• Version: [66]
• Method of installation: [npm install -S swagger-ui]
• Swagger-UI version: [3.17.0]
• Node version: [8.11.2]

Content & configuration

Following is an extract from my Vue component script section

<script>
import SwaggerUI, { presets } from 'swagger-ui'
...

Following is an extract from my Vue component mounted function:

mounted: function () {
      const ui = SwaggerUI({
            url: "http://petstore.swagger.io/v2/swagger.json",
            dom_id: '#swagger-ui',
            layout: "StandaloneLayout",
            presets: [presets.apis],
            deepLinking: true
          })
}

    <div id="swagger-ui"/>

How can we help?

Hello, I am trying to embed swagger-ui in my SPA app (node.js, bootstrap, vue.js, bootstrap). When redering my page that includes the component described above, I get numerous warnings:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `OperationTag`, expected a single ReactElement.
or
Warning: Failed prop type: Invalid prop `schema` of type `Immutable.Map` supplied to `Model`, expected `OrderedMap`
...

The installation section from the docs is very clear as well as the configuration one. Is there any project or url I could dig into to get a detailed example as well as some help for fixing this error?

The HTML rendering seems also to be pushed to the right (see attached screenshot), any suggestion on how to fix this?

Thanks a lot for your help,

[jbguillois]

@shockey thanks again! I disabled deeplinking and everything is back to normal.

Thanks for your help!

[shockey]

@jbguillois yeah, this is because enabling deep linking (deepLinking: true) indicates to Swagger UI that it can have control of the browser’s URL fragment.

To fix this, you can either (a) reconfigure your application router to use an actual URL path instead of the fragment (in React Router, this would be moving from HashRouter to BrowserRouter, not sure what it is in Vue), or (b) disable Swagger UI deep linking.