Swagger-ui: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[north-krimsly-hp]

Greetings Swagger-UI team,

We're using version 3.9.3 integrated with Drupal 7. When I load a page with Swagger-UI rendered OpenAPI spec on it, I get the Javascript console error "Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'." in swagger-ui-bundle.js line 98 and "Uncaught ReferenceError: SwaggerUIBundle is not defined". These errors are encountered whether the OpenAPI spec files we are attempting to render are version 2 or version 3. These errors show up on both Chrome and Safari on OS X 10.13.3. Our site also uses jQuery 1.12.

The code we wrote to render an OpenAPI spec using Swagger-UI in a Drupal page was working using version 3.6.1 of the Swagger-UI library. We did the integration by dropping in swagger-ui.js, swagger-ui-bundle.js and swagger-ui-standalone-preset.js from the dist folder. We did not copy over the .map files. We used the following code to render a Swagger-ui instance. Do you know why the code below worked in 3.6.1 but is failing in 3.9.3? I've tried many different approaches but can't figure out why it isn't working anymore.

Thanks

<script>$(document).ready(function() { const swagger_ui_139 = SwaggerUIBundle({ url: 'path-to-swagger-file/swagger-file.json', dom_id: '#swagger-ui-container-139', validatorUrl: null, docExpansion: 'none', supportedSubmitMethods: '[]', presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: 'StandaloneLayout', });});</script> <script>

[shockey]

Hey @north-krimsly-hp!

Take a look at https://github.com/swagger-api/swagger-ui/issues/4038, your issue may have the same root cause. I mentioned some workarounds, so give them a spin and let me know what happens!

[north-krimsly-hp]

Hi Shockey,

Hey that workaround worked! I modified the page so that the swagger-ui Javascript files load in the footer instead of the document head. I also set the defer="defer" attribute on those scripts, and finally I made an additional script that fires before the swagger-ui scripts load, that sets window.noZensmooth = true.

Thanks very much, I'm not sure I ever would have figured it out. I hope the Zenscroll team fixes the problem though, it was very difficult to trouble-shoot.

[shockey]

Glad you got it working! Yeah, it was a tough thing to track down - it took @ponelat and I most of a morning to even identify 😄

[shockey]

Hi folks - Zenscroll has released [email protected] which fixes this issue on their end.

Future versions of Swagger-UI will capture this fix as well.

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