Skip to main content

I am new to writing Figma plugins, however i have started quite a large project. Hence, for code cleanliness i would like to hold some of the functions, types etc. in other files apart from code.ts.

However, when i try to import a function into code.ts to run, from another file, Figma throws an error that it does not recognize the ‘import’ syntax.



Syntax error on line 1: Unexpected token



Is there a way to import a function to the code.ts, so that i dont have to copy the whole codebase into code.ts.

Set up your compiler to bundle the code into a single file.

figma.com

You are a life saver ! Thank you very much !

I followed the guide but then get these errors when compiling to json.:

I have noticed that removing the "./node_modules/@types" from the typeRoots in tsconfig.json no longer launches this error but then will not work with the imports.

 

p6:55:50 PM] Starting compilation in watch mode...

node_modules/@figma/plugin-typings/index.d.ts:10:9 - error TS2451: Cannot redeclare block-scoped variable 'console'.

10   const console: Console
           ~~~~~~~

  node_modules/@types/node/globals.d.ts:157:9
    157     var console: Console;
                ~~~~~~~
    'console' was also declared here.
  node_modules/@types/node/console.d.ts:415:19
    415         namespace console {
                          ~~~~~~~
    and here.
  node_modules/@types/node/console.d.ts:449:13
    449         var console: Console;
                    ~~~~~~~
    and here.

node_modules/@figma/plugin-typings/index.d.ts:27:9 - error TS2451: Cannot redeclare block-scoped variable 'fetch'.

27   const fetch: (url: string, init?: FetchOptions) => Promise<FetchResponse>
           ~~~~~

  node_modules/@types/node/globals.d.ts:454:14
    454     function fetch(
                     ~~~~~
    'fetch' was also declared here.

node_modules/@types/node/console.d.ts:415:19 - error TS2451: Cannot redeclare block-scoped variable 'console'.

415         namespace console {
                      ~~~~~~~

  node_modules/@figma/plugin-typings/index.d.ts:10:9
    10   const console: Console
               ~~~~~~~
    'console' was also declared here.

node_modules/@types/node/console.d.ts:449:13 - error TS2451: Cannot redeclare block-scoped variable 'console'.

449         var console: Console;
                ~~~~~~~

  node_modules/@figma/plugin-typings/index.d.ts:10:9
    10   const console: Console
               ~~~~~~~
    'console' was also declared here.

node_modules/@types/node/console.d.ts:451:25 - error TS2339: Property 'console' does not exist on type 'typeof globalThis'.

451     export = globalThis.console;
                            ~~~~~~~

node_modules/@types/node/globals.d.ts:157:9 - error TS2451: Cannot redeclare block-scoped variable 'console'.

157     var console: Console;
            ~~~~~~~

  node_modules/@figma/plugin-typings/index.d.ts:10:9
    10   const console: Console
               ~~~~~~~
    'console' was also declared here.

node_modules/@types/node/globals.d.ts:454:14 - error TS2451: Cannot redeclare block-scoped variable 'fetch'.

454     function fetch(
                 ~~~~~

  node_modules/@figma/plugin-typings/index.d.ts:27:9
    27   const fetch: (url: string, init?: FetchOptions) => Promise<FetchResponse>
               ~~~~~
    'fetch' was also declared here.

-6:55:51 PM] Found 7 errors. Watching for file changes.

Reply


Terms & ConditionsCookie settings