Importing modules on the Figma Plugin

1. I don’t think you should be running such a complex library in the plugin backend. Better import it to UI and then send results to backend when necessary. It probably won’t work in the backend anyway as it’s a limited environment and not all JS/browser features are available.

2. Hard to say what could be wrong without knowing your setup. What compiler/bundler are you using and what’s the config?

Thanks Gleb! I’m going to try importing to the UI instead

I’m facing the same error message the like thread opener, no matter with what library (successfully installed using npm) I’m trying to import. When I try to import in the UI instead, the error is: Cannot use import statement outside a module

So what are we to do? How do 3rd party libraries such as dotenv or JSZip to be imported in Figma plugins?

Just to add that my tsconfig.json and its compilerOptions are basically the default one generated for a new plugin by Figma itself.

The occurrence of this error can vary depending on whether you’re dealing with JavaScript on the server-side using Node.js or on the client-side within a web browser. The error "Cannot use import statement outside a module"stems from several potential causes, with the appropriate solution hinging on how you incorporate modules or script tags into your code.

Add type="module" inside the script tag

When working with ECMAScript modules and JavaScript module import statements in the browser, you’ll need to explicitly tell the browser that a script is module. To do this, you have to add type=“module” onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property “type”: “module” as shown below.

{
  // ...
  "type": "module",
  // ...
}

I think it’s related to the issue I’m trying to handle. I wanted to use an external library like Refractor into the plugin code code.ts. The import it’s not a problem, but when I try to use any method from there it throws always the same error:

You need to bundle libraries into a single output file. You can’t import them. Docs: