Clipboard import issues

Adobe XD UXP Plugin API
#1

Hi there,

I’m using the clipboard API as such:

const clipboard = require("clipboard");

function copyPast() {

    application.editDocument((selection, documentRoot) => {

        clipboard.copyText("hello");
    });
  }

When the function is called from an onClick event, I’m seeing this error:

Plugin TypeError: clipboard.copyText is not a function

It seems that the import is leading to the ClipboardJS package in node module (deleting it doesn’t change anything).

If you can shed some light here, I’d appreciate your help, thanks!

1 Like
#2

Since you’re using node_modules, I’m assuming you have some sort of build process (webpack, rollup or something like that) in place (XD, after all, doesn’t support the node_modules folder, by itself)?

In that case, you’ll have to add 'clipboard' to your external dependencies. Depending on your build tool, this is externals (webpack) or some other field in your config.

Hope this helps,
Best,
Pablo

#3

BTW: Welcome to the forums :wave::slightly_smiling_face:

#4

Yes I use Webpack, and I have clipboard as a dependency, but the error: Plugin TypeError: clipboard.copyText is not a function is still present.

It’s weird since I can import application, imageFill, selection, etc.

P.S. Thanks for welcoming me!

1 Like
#5

Gotcha, I installed ClipboardJS as a dependency instead of adding it as an external in my webpack.config.json.

externals: {
    application: "application",
    scenegraph: "scenegraph",
    viewport: "viewport",
    assets: "assets",
    clipboard: "clipboard",
    uxp: "uxp"
  }

Here’s another thread that referencing the same issue:

1 Like