Swagger-editor: Codegen broken with "TypeError: Cannot read property 'downloadFile' of undefined"

[jemerald]

| Q | A
| ----------------------------------- | -------
| Bug or feature request? | Bug
| Which Swagger/OpenAPI version? | 2
| Which Swagger-Editor version? | 3.2.6
| How did you install Swagger-Editor? | use online editor.swagger.io
| Which broswer & version? | Chrome@latest
| Which operating system? | Windows 10

Demonstration API definition

Any spec, the sample petstore.yaml will do

Configuration (browser query string, constructor, config.yaml)

No specific config

Expected Behavior

When generate code, a zip file will be downloaded

Current Behavior

No zip file is downloaded, and Javascript Console shows the following error:

topbar.jsx:179 Uncaught (in promise) TypeError: Cannot read property 'downloadFile' of undefined
    at topbar.jsx:179
    at <anonymous>

Possible Solution

Looks like it is caused by this commit that added this. to downloadFile call.

Note: most other this. changes are fine as this are in the right context, but the one at line 179 is actually callback from fetch.

      fetch(res.body.link)
        .then(res => res.blob())
        .then(res => {
          this.downloadFile(res, `${name}-${type}-generated.zip`) // this line
        })

Context

All codegens are broken as the result.

[mihaeu]

Doesn't work with 3.2.6, but works with 3.2.5

[manoadamro]

Getting this as soon as the editor loads

TypeError: n.slice is not a function
at swagger-ui.js:1
at immutable.js:3016
at immutable.js:3016
at immutable.js:2867
at Ne.__iterate (immutable.js:2206)
at it.__iterate (immutable.js:2867)
at r.__iterateUncached (immutable.js:3015)
at U (immutable.js:604)
at r.M.__iterate (immutable.js:320)
at r.__iterateUncached (immutable.js:3015)

Getting this when i try to generate server code

topbar.jsx:179 Uncaught (in promise) TypeError: Cannot read property 'downloadFile' of undefined
    at topbar.jsx:179
    at <anonymous>

For anyone who needs a working version:

• Download this (an older version): https://github.com/swagger-api/swagger-editor/releases/tag/v3.2.5
• Open index.html in broweser
• Paste in your code
• Generate server

[shockey]

Hi everyone, thanks for the heads up on this! I've just opened a PR that fixes the issue; once that's merged I'll push out a patch release.

Indeed, the problem was the attempt to use this as a reference to the Topbar component, inside of a named function that was providing its own this binding. I resolved that by making handleResponse a component method, as it makes little sense to be recreating the function each time downloadGeneratedFile is called.

Zooming out a bit, this sort of functionality should be covered by integration tests. We've added many integration tests to Swagger-UI (see for yourself!), and I'm currently working on wiring them into our PR builder (https://github.com/swagger-api/swagger-ui/pull/4090), but Swagger-Editor doesn't have an integration test harness as of today. In light of that, I'm going to follow up on this with a ticket describing what we'd need to port or implement in order to be capable of testing Topbar functionality in a live browser, so something like this doesn't crop up again.

---

Getting this as soon as the editor loads

TypeError: n.slice is not a function

@manoadamro, this sounds like a different issue (I'm not seeing this on editor.swagger.io or my local environment). If this continues after the patch release, could you open a separate issue with more information?

[shockey]

Okay, v3.2.7 is live on npm and swagger.io 😄 everything seems to be working now, thanks again everyone!