Additional uxp-panel not loading in React properly

Photoshop UXP Plugin API
, ,
1

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.

image
image841×780 57.7 KB

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:

image
image805×772 53.2 KB

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:
    image
    image664×635 32.6 KB

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.

2 Likes
2

Have you found a solution?
I’ve a similar problem on InDesign:
In my case I’ve 5 panels and it seems like the first/main panel will always override the second one.
So the content of the second panel it’s lost and the button that should open the second panel will open the first panel instead.
This also lead to inconsistency between the content of the panel and the button label / panel label which show the label for the second panel.
This problem is blocking us from delivery to the customer.

3

This solution is “supposed” to work, I haven’t implemented it yet into Bolt UXP

4

For anyone using bolt-uxp before ruxp has support for the framework, this is the crude solution i am working with

/*
    Disgusting workaround to a timing issue within uxp
*/

const A = ()=>{
  return <p>CONTENT IN MAIN PANEL</p>
}
const B = ()=>{
  return <p>CONTENT IN SECOND PANEL</p>
}

setTimeout(()=>{
  const secondRoot = document.querySelector('body>uxp-panel')!;
  const root = createRoot(secondRoot);
  root.render(<B />);
},1)

export const App = () => {
  const hostName = (uxp.host.name as string).toLowerCase();
  return (
    <>
      <A />
      <uxp-panel panelid="your id here"></uxp-panel>
    </>
  );
};