Swagger-ui: SwaggerUI embedded in node.js app

[jbguillois]

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,

[shockey]

Hi @jbguillois!

When redering my page that includes the component described above, I get numerous warnings:

This is because your Vue app is setting NODE_ENV=development, which is good for your Vue app while you're working on it, but also causes Swagger UI's React application to display its development warnings.

The solution is for us to bake in the NODE_ENV=production flag within Swagger UI, so our warnings don't clutter your workflow - we're already doing something like this with DefinePlugin, there's probably a way to force it to stick even when the surrounding environment has a different opinion.

Besides that, the only thing that can be done is you, I, or someone fixing the warnings on Swagger UI's end 😉

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

This is a known issue when Bootstrap and Swagger UI are on the same page, see https://github.com/swagger-api/swagger-ui/issues/4574. If you have the time, a PR that fixes the CSS class name collisions would be welcome!

[jbguillois]

Hi @shockey!
Thank you for your quick reply. Yes indeed, setting vue in production mode removes these warning, so it's all good.
Regarding the two other problems, I will look into these if I can provide some help, but as a newbie I am not sure :)

I also noticed another issue (in dev or production mode): the url I use (my vue router path actually) to display the swagger ui is something like http://localhost:3001/#/services/2173893/api-docs
As soon as the page is loaded, the 'api-docs" suffix is removed. Any thought on why this could happen?

Thx!

[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.

[jbguillois]

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

Thanks for your help!

[lock[bot]]

Locking due to inactivity.
This is done to avoid resurrecting old issues and bumping long threads with new, possibly unrelated content.
If you think you're experiencing something similar to what you've found here: please open a new issue, follow the template, and reference this issue in your report.
Thanks!