npm packages or Node.js APIs in XD Plugins

Question

I am trying to build a plugin for Adobe XD. I'd like to use some npm packages along with some Node.js APIs inside my code. Would this be possible?

Answer 1

Javascript support page says you may be able use some npm packages (some might require webpack). However, Node.js apis are not supported.

Can I use npm packages or Node.js APIs?

You may be able to use some npm packages without modification, but chances are good that you’ll need to use webpack or rollup in order to generate a bundle.

Node.js APIs themselves are not supported.

Answer 2

You can use some npm packages in your Adobe XD plugin, but you need to bear in mind the following constraints:

• XD's require function does not follow node-style resolution. That is, require('module') won't automatically resolve to node_modules/module/index.js. To address this, you'll want to use a bundler, such as webpack. For an example using webpack and React, see the ui-hello-react sample.

• The XD JavaScript environment does not supply a lot of node APIs that many node modules may rely on. For example, npm packages that use Node's fs module will not work inside of Adobe XD plugins. Purely algorithmic npm packages should work, however, as long as they only rely on the JavaScript specification itself.

• Furthermore, the HTML5 DOM API environment supplied by Adobe XD may not be sufficient if your npm package relies upon specific browser APIs. For example, the Web Audio API isn't available to Adobe XD plugins, and so any npm packages that require the use of that module wouldn't work.

For some packages, it may be sufficient to add stubs or polyfills. For example, you could stub requestAnimationFrame if a module required it, like so:

global.requestAnimationFrame = cb => cb();

Now this isn't a functional rAF, but it might be sufficient for the package you're using.