XHR -> eval() -> Not a DOM Element

[wrightleft]

Q&A (please complete the following information)

• OS: Window 10
• Browser: Edge
• Version: 84.0.522.52 (Official build) (64-bit)
• Method of installation: dist assets
• Swagger-UI version: 3.31.1
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

I am trying to embed Swagger UI into an existing web page that loads its content via XHR. When the XHR returns, this function is called:

function updateContentPane(xml_http)
{
   if (xml_http.readyState == DONE) 
   {
      var response = xml_http.responseText;
      var content_pane_element = document.getElementById('content_body');
      content_pane_element.innerHTML = response;

      var scripts = response.extractScripts();
      for (var i=0; i<scripts.length; i++)
      {
         eval(scripts[i]);
      }
}

This is the page loaded via XHR:

<script>
  var swagger_ui = document.createElement("div");
  swagger_ui.setAttribute("id", "swagger-ui");
  document.getElementById("content_body").appendChild(swagger_ui);

  const api_ui = SwaggerUIBundle({
    urls: [{"url": "/api/openapi.yaml", "name": "OpenAPI"}],
    validatorUrl: null,
    dom_id: "#swagger-ui",
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    layout: "StandaloneLayout"
  });

  window.ui = ui;
</script>

It creates a new <div> element in the tree and then creates the SwaggerUIBundle. Nothing too fancy. I would expect this to work.

Instead I get:

Which points to this error, which is, "Target container is not a DOM element."

I can see the <div> in the tree:

I've also tried the domNode argument to SwaggerUIBundle, with the same results. In addition to having a <div id="swagger-ui"></div> in the file being requested.

How can we help?

Is this use case something you would expect to work? I am able to use the same setup (XHR -> eval) for simple Hello World ReactJS examples, and they work. Like this:

<div id="swagger-ui"></div>
<script>
  class Hello extends React.Component {
    render() {
      return React.createElement('div', null, 'Hello World');
    }
  }

  const domContainer = document.querySelector('#swagger-ui');
  ReactDOM.render(React.createElement(Hello), domContainer);
</script>

So why does Swagger UI not work in this situation?