react-dom: Target container is not a DOM element.

In the appearance visual customizer, I’m getting the following error in my dev-tools log:

Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Visitng the link shows this message:

Target container is not a DOM element.

Trace:

/url/to/wp-content/plugins/multisites-superlist/msl/build/static/node_modules/react-dom/cjs/react-dom.production.min.js:296:47

That line of code starts out with:
exports.render=function(a,b,c){if(!rk(b))throw Error(y(200));

That triggers: /url/to/wp-content/plugins/multisites-superlist/msl/build/static/js/index.js:8

with this code:

const mySites = document.querySelector('#wp-admin-bar-my-sites .ab-sub-wrapper');

ReactDOM.render(
  <React.StrictMode>
    <Sitelist />
  </React.StrictMode>, mySites
);

And yes, sure enough, the admin bar is not present in the visual customizer and therefore not a valid DOM element.

I’m not getting the error in Gutenberg editor (also no admin bar), so it seems to be exclusively a react thing with the appearance visual customizer.

Fixed it by adding this line of code right at the beginning of the mssl_scripts() function on line 54 in multisite-superlist.php:

if  ( get_current_screen()->id === 'customize' ) { return; }

Like I said, it seems to be exclusive to react in the visual customizer, but if there were any other parts of the admin panel where react is used and there’s no admin bar present, they could be added as screen ids to exclude pretty easily.

Thanks again for the awesome plugin!