Skip to main content
Solved

Importing in code.ts throws error

  • September 26, 2023
  • 3 replies
  • 1042 views
B

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.

Best answer by tank666

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

figma.com
View original

tank666
  • tank666
  • September 26, 2023

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

figma.com
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
B

You are a life saver ! Thank you very much !

Miguel Neves

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.

 

[6: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

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