Some plugin panels are not showing up in Adobe XD 49

Hi there,

I’m sttk3, developer of Adobe XD plugins Singari and TransformSession, and after updating Adobe XD to 49.0.12.14 arm64, those plugin panels are not showing up. 48 works fine.

They are just html based panels created by addEventListener to the element. From what I have found, the error seems to be caused by document.querySelector always returning null. Is there any information on any changes to the panel specs or bugs?

The error message is as follows:

Exception while invoking panel method on Plugin Id: 6a37e6e3, Panel Id: showPanel, Entrypoint: create, [TypeError: Cannot read property 'addEventListener' of undefined]

Uncaught exception in /Users/username/Library/Application Support/Adobe/Adobe XD/develop/6a37e6e3/main.js:1 with history {"undo":["長方形を描画","線のカラー","塗り"],"redo":[],"inBatch":false} at:

TypeError: Cannot set property 'value' of null
    at Object.update (/Users/username/Library/Application Support/Adobe/Adobe XD/develop/6a37e6e3/main.js:587:22)

macOS Big Sur (v11.6)
MacBook Air (M1, 2020)
Adobe XD (49.0.12.14 arm64)

Thanks and best regards,
sttk3

1 Like

It appears that the querySelector was being executed before document.innerHTML was complete. It may be that the error did not occur because there was enough time in the previous version.

Currently I am waiting until the querySelector finds the target Element using setTimeout. If there is another smart way to do this (besides using React or Vue), please let me know.

+1 on this issue, a few of my plugins are affected. Do we know what has been changed so we can find the best way to fix it instead of wrapping the addEventListener() in setTimeout().

Would be helpful to see some code here—when is querySelector being called, and where is innerHTML being set?

Hey @kerrishotts. I didn’t have much time to investigate. I have just tried what @sttk3 suggested.

Here is an example code that in v49 shows a blank/empty panel and an error (the one that @sttk3 posted above) displayed in the legacy developer console, not in UXP Dev Tool debug (at least for me):

let panel;

function create() {
    const HTML =
        `
        <input type="checkbox" class="updateSetting" name="stroke" />
        <input type="checkbox" class="updateSetting" name="corners" />
        <input type="checkbox" class="updateSetting" name="shadow" />
        `;

    panel = document.createElement("div");
    panel.innerHTML = HTML;

    panel.querySelectorAll(".updateSetting").forEach(item => {
        item.addEventListener('click', async function () { // This line breaks the plugin
            // do something here
        })
    })

    return panel;
}

function show(event) {
    if (!panel) event.node.appendChild(create());
}

And here is an example code that works:

let panel;

function create() {
    const HTML =
        `
        <input type="checkbox" class="updateSetting" name="stroke" />
        <input type="checkbox" class="updateSetting" name="corners" />
        <input type="checkbox" class="updateSetting" name="shadow" />
        `;

    panel = document.createElement("div");
    panel.innerHTML = HTML;

    // wrap with setTimeout()
    setTimeout(function(){
        panel.querySelectorAll(".updateSetting").forEach(item => {
            item.addEventListener('click', async function () {
                // do something here
            })
        })
    }, 100);

    return panel;
}

function show(event) {
    if (!panel) event.node.appendChild(create());
}
1 Like

Just shooting in the dark here – can you add the following to your manifests to see if the issue goes away? Trying to pinpoint what might have changed.

"featureFlags": {
    "experimentalCppSelectorEngine": false
}

I’ve tried it. Still, the same error appears.

It was the same result. The error message is also the same.

Same error here, and setting that feature flag has no effect.

It seems querySelectorAll now returns a Proxy instead of a nodelist like the docs say. There is a _list property that contains an array the length of the found matching selectors, but each item in the array is undefined. The Proxy is also missing all the iterable functions someone would use with a querySelectorAll.

querySelector itself returns a Node so that still works.

Although PS related perhaps relevant?

Found the specific issue I was having: The node I was doing a querySelectorAll on was not yet attached to the DOM, and it seems the current UXP implementation of querySelectorAll assumes it is.

Making sure my panel was added to the DOM before calling querySelectorAll solved the issue for me.

2 Likes