Skip to main content
Question

Figma plugin error using typescript. Unexpected token

  • January 19, 2023
  • 8 replies
  • 5296 views

Nidhin_Kuttikkattu_Rajeevan

My plugin compiles fine

But when run it, gives error in figma console

8 replies

Michael_Yagudaev

How are you compiling your plugin? What are you using to build it?

I found Quick start — Create Figma Plugin was great help.

It looks like you are not compiling your TS code, you should first convert it to JS


Nidhin_Kuttikkattu_Rajeevan

How are you compiling your plugin? What are you using to build it?

I created the plugin in a figma desktop app. I opened it in Visual studio code. I installed latest typescript. A default figma plugin project contains a Readme file to do the steps. I did all.

npm install --save-dev @figma/plugin-typings

I used terminal ->Run build task - tsc watch tsconfig.json option.

It created the js file.

This is how I did.


Michael_Yagudaev

Ok, I think I see what is happening. You are issuing an export interface, which is the only export in this module. Typescript therefore converts it to export {} inside of the final .js file.

But that doesn’t work in the browser.

So you just need to remove that export keyword and just use the interface.

In other words, you should avoid having exports in the entry file. I’d create additional files.

Try that it should work.


I’m using this: Quick start — Create Figma Plugin. It abstracts away some of the complexities of compiling and setup.

Here is an example project that is live and open source I created: GitHub - yagudaev/css-gradient-to-figma: Plugin to insert a CSS Gradient into Figma.

Yuan the author of that framework has a large repo with lots of examples: GitHub - yuanqing/figma-plugins: Monorepo for my Figma plugins


Nidhin_Kuttikkattu_Rajeevan

Once I remove the export, I get another error.

figma_app.min.js.br:5 Syntax error on line 7: Unexpected identifier
interface ExportableBytes {

figma_app.min.js.br:5 Error: Syntax error on line 7: Unexpected identifier
at vEs (figma_app.min.js.br:1467:95)
at async figma_app.min.js.br:1464:6435

This was used in my typescript, code.ts

I moved it to figma.d.ts. That error gone but started complaining another line.
figma_app.min.js.br:5 Syntax error on line 9: Unexpected token :
async function main(nodes): Promise {

So I miss something.

Thank you, I will refer other tutorials.


Aleksandr16

Hi. Have u resolved this problem? I have “Unexpected token” too when I’m trying import module from js file.


Nidhin_Kuttikkattu_Rajeevan

Oh no mate. I stopped following that git repo. I have to learn more web programming and js. 🙂


Aleksandr16

Good luck =)


Aleksandr16

Look! Try webpack =)

figma.com

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings