React element attempts to render before DOM element exists

Hi, I’m attempting to render a React component in a web-panel module of a plugin for Jira Service Desk Server. Webpack processes the React source and places the transpiled bundle in /src/main/java/resources/client/container.pack.js

The issue we’re having is that the js code attempts to render the React element before the DOM element exists. We’ve tried addEventListener(“load”, callback) but this seems to detect when the main page is loaded rather than the plugin as getElementById returns null at this point. A static timeout of 1s works but is ugly. Is there a preferred solution for this issue?

Thanks in advance for any help

@john.campbell we had similar issues and here is how we managed to get this to work:

Firstly, we include the web resources after the entry point DOM element (we use the atlassian-webresource-webpack-plugin - highly recommended)

<div>
    <div id="app-container"/>
</div>

<script>
    WRM.require("wr!app-key:entrypoint");
</script>

Then the JS loaded by WRM.require("wr!app-key:entrypoint") initializes the React app and looks as follows:

const init = () => {
    const entryPoint = document.getElementById("app-container");
    if (entryPoint) {
        ReactDOM.render(
            <App/>,
            entryPoint,
        );
    }
};

jQuery(init);

init() will be only called when the DOM has finished loading and you can use the Jira provided jQuery for this.

Hope that helps. It’s worked for us so far without any issues.

1 Like

Many thanks. That works perfectly!

1 Like