Importing modules on the Figma Plugin

Ask the community
1

Hi!
I’m trying to import a module (@huggingface/inference) to my code.ts file.

I installed the module, but I’m running into this error on the import line ( Cannot find module '@huggingface/inference'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option? ).

I’m new to typescript, so help would be appreciated! Thanks!

Screenshot 2023-08-07 at 9.52.25 AM
Screenshot 2023-08-07 at 9.52.25 AM2178×200 43.2 KB

2

  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?

3

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

4

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?

5

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

6

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",
  // ...
}
7

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:

Screenshot 2024-01-14 at 18.47.12
Screenshot 2024-01-14 at 18.47.121780×128 24.9 KB

But I can use the same library from the UI with no problem. My intention was to avoid sending data back and forth from the plugin to the UI due to all the data manipulation would make sense do it just from the plugin and the outcome will be creating a text layer in Figma. I tried to use other libraries and it happens the same. Is it the expected behaviour @Gleb ? Not using external libraries into the code.ts plugin ?

8

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