Converting plugin from commonjs to es2015 (es6) syntax => errors

Adobe XD UXP Plugin API
1

I am trying to convert the ui-panle-hello-react to use es6 syntax that is using import instead of require. However I don’t see any error in VS Code console, but the xd developer console says this, but why ?

Plugin Error: Error loading plugin <settings>\develop\ui-panel-hello-react
Plugin Error: No handler supplied for declared panelIds: hello
    at validatePanelEntryPoints (plugins/PluginLoader.js:1:5539)
    at loadPlugin (plugins/PluginLoader.js:1:810)
    at plugins/PluginLoader.js:1:9353
    at Array.forEach (<anonymous>)
    at reloadPlugins (plugins/PluginLoader.js:1:9327)
    at plugins/PluginLoader.js:1:10002
    at convertPluginErrorToString (plugins/PluginErrorUtil.js:1:198)
    at safeGetStackTrace (plugins/PluginErrorUtil.js:1:339)
    at internalFormatPluginError (plugins/PluginErrorUtil.js:1:1073)
    at internalReportPluginError (plugins/PluginErrorUtil.js:1:1171)
    at Object.reportPluginError (plugins/PluginErrorUtil.js:1:1603)
    at loadPlugin (plugins/PluginLoader.js:1:1488)
    at plugins/PluginLoader.js:1:9353
    at Array.forEach (<anonymous>)
    at reloadPlugins (plugins/PluginLoader.js:1:9327)
    at plugins/PluginLoader.js:1:10002

PS: I have replaced everywhere:
require with import
module.exports to export default

Main.jsx

import "./util/reactShim";

import App from "./App";
import PanelController from "./controllers/PanelController";

let helloPanel = new PanelController(App);

export default {
  panels: {
    hello: helloPanel,
  },
};

controllers/PanelController.js

import React from "react";
import ReactDOM from "react-dom";
import { selection } from "scenegraph";
import os from "os";

class PanelController {
  constructor(App) {
    this.App = App;
    this.instance = null;
    this.rootNode = document.createElement("div");
    this.rootNode.className = `root ${
      os.platform() === "darwin" ? "mac" : "win"
    }`;
    //this.rootNode.style.margin="-8px";
    this.attachment = null;

    ["show", "hide", "update"].forEach(
      (fn) => (this[fn] = this[fn].bind(this))
    );
  }

  show(event) {
    const App = this.App;

    this.attachment = event.node;
    this.attachment.appendChild(this.rootNode);

    if (!this.instance) {
      this.instance = ReactDOM.render(
        <App selection={selection} />,
        this.rootNode
      );
    }

    this.update();
  }

  hide(event) {
    this.attachment.removeChild(this.rootNode);
  }

  update() {
    if (this.instance && this.instance.documentStateChanged) {
      this.instance.documentStateChanged(selection);
    }
  }
}

export default PanelController;
2

it worked with:

src/main.jsx

export const panels = {

  hello: helloPanel,

};
1 Like