Figma plugin error using typescript. Unexpected token

My plugin compiles fine

But when run it, gives error in figma console

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

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.

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

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.

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

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

Good luck =)

Look! Try webpack =)