How to use ES6 modules within an Adobe XD plugin?

I was wondering if I could use ES6 imports from within my XD plugins.

Whenever I for example use import Vue from 'vue', the build task completes successfully, however, XD throws an error in the developer console when loading the plugin:

Plugin Error: Error loading plugin <settings>/develop/my_plugin
Plugin TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (<settings>/develop/my_plugin/main.js:14367:16)
    at Module../src/router.js (<settings>/develop/my_plugin/main.js:14368:30)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at Object../src/main.js (<settings>/develop/my_plugin/main.js:14267:16)
    at __webpack_require__ (<settings>/develop/my_plugin/main.js:21:30)
    at <settings>/develop/my_plugin/main.js:85:18
    at <settings>/develop/my_plugin/main.js:88:10
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:3563)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:88:1015)
    at d.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.3.8/build/modules_gen/pluginmanager/src/js/pluginmanager_scripts.js:95:2060)
    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:1277)
    at plugins/PluginLoader.js:1:8993
    at Array.forEach (<anonymous>)
    at reloadPlugins (plugins/PluginLoader.js:1:8967)
    at Artwork.history.waitForCurrentEditBatch.then (plugins/PluginLoader.js:1:9642)

I started with the Hello Vue Dialog example here and converted it to a Panel - but the same error occurs for the dialog example. The package.json and webpack.config.js weren't altered in this process, so the libraryTarget remains commonjs2. Do I need an additional plugin for resolving the ES6 module imports?

In another thread over here, ES6 Imports and Exports are not directly mentioned to be supported by Adobe XD: Can you use ES2015+ features (ES6) in Adobe XD plugins?

Since I have a prevalent code base using ES6 Imports and Exports, I'd like to drop it in and use it within the plugin without replacing every import statement with the needed require statement.

I can provide a minimal example if required.

Thanks for your help.

Best, Daniel

Solution

So the fix is rather easy - as long as you know how to write these export statements.

In the main.js file, replace

module.exports = {
    panels: {
        mainPanel: { show, hide, update }
      }
};

with

export const panels = {
    mainPanel: { show, hide, update }
}

as per @kerrishotts on Twitter: https://twitter.com/kerrishotts/status/1249832641857114114

From that point onwards, you can use import and export statements across your project.