Additional uxp-panel not loading in React properly

I have a Bolt UXP user report an issue with trying to add additional panels in React, and after looking into it further it seems to only be an issue with React, Vue and Svelte templates work just fine.

The issue is that on initial load, the additional panel turns up blank.

As you can see from the markup, it appears a <uxp-panel /> tag has been added to the <body /> automatically which is empty, and that’s what’s rendering to the panel, resulting it it being blank.

The “correct” <uxp-panel /> tag inside of the div is not being rendered.

Now after pressing the “Reload” button in UDT or after running location.reload() then, the document only has one <uxp-panel /> and thus loads correctly:

I’ve tested in dev mode and after installing a CCX and have the same result.

Has anyone else experienced this or have any workarounds?

Workarounds I’ve tried:

  • Deleting the empty tag if it exists, but that doesn’t work, still empty.
  • Adding a dummy <uxp-panel /> tag to the HTML markup inside of the div in the index.html file so it gets recognized immediately and then replaced, but that also doesn’t work.
  • I’ve also tried appending markup to the empty tag as seen below, but it’s still empty after that:

Since this issue is only with React, I’m wondering if it’s some problem with React taking too long to render the element, causing UXP to just default to creating a dummy tag and assuming the panel is broken. If there’s a way to disable that behavior I think that would be ideal.

1 Like