Plone 5.1 - JavaScript library encounters run condition with Plone resources

Plone Support Theming
1

I'm building a site with Plone 5.1 and I'm trying to integrate a 2nd-party library into our theme that I have limited control over. The library is written in React and uses Redux to render a navigation bar, which is essentially our "web portal" that should be visible on every page.

I tried building this as an add-on but ran into problems, so I decided to just include the webpack'd bundle in the theme itself and load it from the main template, like this:

<!doctype html>
<html>
  <head>
<title>Plone Theme</title>
<link rel="stylesheet" type="text/css" href="../myassets/styles/basic/navbar.latest.css" />
<link rel="stylesheet" type="text/css" href="../myassets/styles/basic/mat0.41.1.css">
  </head>
  <body>
<div id="my-navbar"></div>
<div id="my-contents"></div>

<script type="text/javascript" src="../myassets/styles/basic/webpack.bundle.js"></script>
  </body>
</html>

This is literally the entire mockup template, which is a cut-down version of Barceloneta. I can't post the code for the library, but I can show you how we install it....

import navbar from '@myorg/my-navbar'

export default () =>
    navbar.install({
        element: document.querySelector('#my-navbar'),
        suiteId: 'mysuite',
        productId: 'home-page',
        cookieName: 'navbar-myorg',
        staticCSS: true
    })

The script kicks off the 2nd-party library, which tries to inject a nav bar onto the page. This code returns a promise.

The problem is that there seems to be some sort of race condition. The 2nd-party library is reporting that the "my-navbar" element doesn't exist, but the DOM in the developer's console shows that it is there. (The error is https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=undefined&args[]=

If I remove Plone from the equation, and serve the exact same HTML from some other web server, it works just fine.

Does anyone have any suggestions on how I can fix this?