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

[collinbarrett]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Chrome
• Version: 85.0.4183.121
• Method of installation: Docker
• Swagger-UI version: 3.35.0
• Swagger/OpenAPI version: 3.0.1

Content & configuration

Example Swagger/OpenAPI definition:

• swagger.json
• Swashbuckle configuration

Swagger-UI configuration options:
Below copied from html here. Configured via Docker environment variables like here (URLS variable is different on live site than this link as can be seen in snippet below).

The only configuration options I am using are URLS and URLS_PRIMARY_NAME which can be verified as correct in the snippet below copied from the live site.

SwaggerUI({
        url: "https://petstore.swagger.io/v2/swagger.json",
        "dom_id": "#swagger-ui",
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout",
        urls: "[ { url: \"https://filterlists.com/api/directory/v1/swagger.json\", name: \"Directory\" } ]",
        "urls.primaryName": "Directory",
})

Describe the bug you're encountering

The UI throws errors in the console and is unable to display the UI for my spec.

swagger-ui-bundle.js:1 TypeError: Cannot read property 'call' of undefined
    at n.value (swagger-ui-standalone-preset.js:1)
    at n.I.t.render (swagger-ui-bundle.js:1)
    at u._renderValidatedComponentWithoutOwnerOrContext (swagger-ui-bundle.js:1)
    at u._renderValidatedComponent (swagger-ui-bundle.js:1)
    at u.performInitialMount (swagger-ui-bundle.js:1)
    at u.mountComponent (swagger-ui-bundle.js:1)
    at Object.mountComponent (swagger-ui-bundle.js:1)
    at u.performInitialMount (swagger-ui-bundle.js:1)
    at u.mountComponent (swagger-ui-bundle.js:1)
    at Object.mountComponent (swagger-ui-bundle.js:1)
swagger-ui-standalone-preset.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
    at n.value (swagger-ui-standalone-preset.js:1)
    at e.notifyAll (swagger-ui-bundle.js:1)
    at p.close (swagger-ui-bundle.js:1)
    at p.closeAll (swagger-ui-bundle.js:1)
    at perform (swagger-ui-bundle.js:1)
    at A (swagger-ui-bundle.js:1)
    at c.perform (swagger-ui-bundle.js:1)
    at Object.batchedUpdates (swagger-ui-bundle.js:1)
    at Object.batchedUpdates (swagger-ui-bundle.js:1)
    at Object._renderNewRootComponent (swagger-ui-bundle.js:1)

window.versions.swaggerUi
window.versions.swaggerUi
{version: "3.35.0", gitRevision: "g3a9179c", gitDirty: true, buildTimestamp: "Thu, 01 Oct 2020 18:13:52 GMT", machine: "ip-172-31-21-173"}

To reproduce...

Steps to reproduce the behavior:

1. Go to https://filterlists.com/api/
2. See that the Swagger UI does not load.

Expected behavior

The Swagger UI loads the default swagger.json from here.

Screenshots

Here it is working locally, albeit with a slightly different URLS and docker networking configuration for the dev environment.

Additional context or thoughts

It seems to load fine locally, which tells me this could very well be a configuration error on my part. However, the errors are not giving me much to go off of on what to fix if so. One idea is maybe some kind of CORS issue since I only see this on my production site and not locally? I'm not sure.

Here is my docker compose that pulls the swagger-ui image.

[mathis-m]

Your config object is wrong the urls property needs to be json not stringified.
Guess you need to change your env file for that.

[collinbarrett]

@mathis-m Ok, thanks, I'll play with that.

I copied the sample from here.

[mathis-m]

@collinbarrett Fine, i will have a look at the configuration and decide if it should be parsed. If so i will create a PR soon.

[collinbarrett]

Current Docker env config on live site from original Issue description:

URLS="[ { url: \"https://filterlists.com/api/directory/v1/swagger.json\", name: \"Directory\" } ]"
URLS_PRIMARY_NAME=Directory

I temporarily tried this (dropping the quotes around the URLS value), but it didn't like that either:

URLS=[ { url: \"https://filterlists.com/api/directory/v1/swagger.json\", name: \"Directory\" } ]
URLS_PRIMARY_NAME=Directory

Not sure how to put proper json in an environment variable... Googling...

[mathis-m]

@collinbarrett Please try this: URLS="[ { url: 'http://localhost:8080/api/directory/v1/swagger.json', name: 'Directory'}]".

[collinbarrett]

Replaced the URL in your last comment with the one on my live site. So, like this:

URLS="[ { url: 'https://filterlists.com/api/directory/v1/swagger.json', name: 'Directory'}]"
URLS_PRIMARY_NAME=Directory

It generates this in the html which is still failing:

      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        "dom_id": "#swagger-ui",
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout",
        urls: "[ { url: 'https://filterlists.com/api/directory/v1/swagger.json', name: 'Directory'}]",
        "urls.primaryName": "Directory",
      })

^that's live currently here.

[mathis-m]

Ok ^^ so i tried via docker:

docker run -i -p 81:8080 -e URLS="[ { url: 'http://localhost:8080/api/directory/v1/swagger.json', name: 'Directory'}]" swaggerapi/swagger-ui

I think this is some encoding problem

[collinbarrett]

testing this now. same as last, but dropping double quotes around the outside.

URLS=[ { url: 'https://filterlists.com/api/directory/v1/swagger.json', name: 'Directory'}]
URLS_PRIMARY_NAME=Directory

[collinbarrett]

we have a winner! 🎉

URLS=[ { url: 'https://filterlists.com/api/directory/v1/swagger.json', name: 'Directory'}]

Maybe we should update the sample here to like:

URLS=[ { url: 'http://petstore.swagger.io/v2/swagger.json', name: 'Petstore' } ]

[mathis-m]

yep just found an example of how to encode env.
I will update the example to show what is possible.

[mathis-m]

@collinbarrett actually I think the documentation is right. The examples can be used for docker env interface (-e Flag).

I will add an new example for docker-compose .env configuration.