Swagger-ui: Cannot read property 'configureAuth' of undefined

[holyketzer]

I can't use any version of Swagger-UI with Webpack 2. It doesn't work.
E.g. for the 3.x versions I do:

import SwaggerUIBundle from 'swagger-ui'

const ui = SwaggerUIBundle({
    url: "http://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
})

And it throws an error:

VM68244:1 Uncaught TypeError: Cannot read property 'configureAuth' of undefined
    at e.exports (eval at <anonymous> (application.js:12148), <anonymous>:1:18591)
    at Object.eval (eval at <anonymous> (application.js:5924), <anonymous>:49:60)
    at eval (eval at <anonymous> (application.js:5924), <anonymous>:53:30)
    at Object.<anonymous> (application.js:5924)
    at __webpack_require__ (application.js:20)
    at Object.<anonymous> (application.js:12624)
    at __webpack_require__ (application.js:20)
    at application.js:66
    at application.js:69

What I am doing wrong?

[shockey]

Hey @holyketzer, sorry you're having issues!

We recently had a user report success integrating Swagger-UI with Webpack 2 (see #3046). The information in that ticket may give you some more context.

It sounds like the error is coming from here: https://github.com/swagger-api/swagger-ui/blob/master/src/core/index.js#L89

I think you may not have imported the API preset from our package. Try this:

import SwaggerUI from 'swagger-ui'

const ui = SwaggerUI({
    url: "http://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
    presets: [SwaggerUI.presets.apis] // I added this
})

Let me know if that helps!

[holyketzer]

@shockey Thank you for fast and kindly response, but I completely confused.

Readme and example here say that I should write

import SwaggerUIBundle from 'swagger-ui'

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

what I initially tried. You recommend me to

import SwaggerUI from 'swagger-ui'

const ui = SwaggerUI({
    url: "http://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
    presets: [SwaggerUI.presets.apis] // I added this
})

and it works. But how it can guess it from readme or #3046 (he uses SwaggerUIBundle too)?

[shockey]

@holyketzer, SwaggerUI vs. SwaggerUIBundle is just a variable naming difference, it doesn't really affect anything 😄

The bundle is a format of Swagger-UI that has all of its dependencies included. We publish the library in that format for people that don't use or even know about NPM or Webpack - lots of our users want to just drop a <script> tag that pulls in Swagger-UI and be on their way.

When you import the swagger-ui npm package, you're getting a copy Swagger-UI itself _without_ dependencies included inside of itself. Your Webpack build process detects what Swagger-UI needs from node_modules and builds it into your application for you.

Again, that was just a change on my part to make that piece of example code more precise. You could change it back to SwaggerUIBundle and it wouldn't make a difference. Sorry for the confusion!

The important change I made was to add the apis preset. It's needed for Swagger-UI to work!

Given your confusion over this, I'm going to open a PR that adds the apis preset by default, so users won't have everything break if they forget to include it. Hopefully that will save a future user from this situation!

---

Hopefully that clears up your confusion. If you have any other lingering questions, feel free to reply!

[holyketzer]

@shockey thanks a lot, got it