Skip to main content
Question

Errors when using importComponentByKeyAsync


Lewis_Healey

I am trying to get importComponentSetByKeyAsync function to work on my team library but I’m struggling with the console errors, they don’t give much context as to why my component key isn’t working

const newComponent = figma.importComponentByKeyAsync(componentKey);

If I use importComponentByKeyAsync I get

figma_app.min.js.br:4 TypeError: not a function
    at <anonymous> (PLUGIN_65_SOURCE:6)
    at forEach (native)
    at <anonymous> (PLUGIN_65_SOURCE:11)
    at call (native)
    at <eval> (PLUGIN_65_SOURCE:18)

If I use figma.importComponentSetByKeyAsync I get:

Preformatted text`figma_app.min.js.br:14          GET https://www.figma.com/api/design_systems/library/state_group/119e7b07f75105e047eaedb8e4b9ef5b61350ead?fv=15 404

the 404 message is “No such state group”

Any ideas?

10 replies

Gleb
  • Power Member
  • 4708 replies
  • May 4, 2022

You are probably trying to do something with newComponent on the next line and it doesn’t exist yet because you are not waiting for the async function to complete.

Also: Running into WASM "bugs" - #2 by Gleb


Lewis_Healey
  • Author
  • New Participant
  • 14 replies
  • May 4, 2022

I tried something like this but it’s not running the then function and nothing consoles

figma
	.importComponentByKeyAsync(key)
	.then(stickerSheet => {
		console.log('sticker sheet loaded');
	})
	.catch(() => figma.notify('Avatars failed to load, please restart the plugin. If this persists, contact #figma.'));

or I try await and get this

figma_app.min.js.br:4 Syntax error on line 4: Unexpected identifier
const newComponent = await figma.importComponentSetByKeyAsync(componentSetKey);

Gleb
  • Power Member
  • 4708 replies
  • May 4, 2022

Is this the full code of the plugin or is there something else like figma.closePlugin() after these lines? If you close the plugin before .then() in the promise finishes, it won’t write anything to console.

Did you enable Developer VM?

The syntax error is pretty self-explanatory, you probably have some extra or missing bracket somewhere.


Lewis_Healey
  • Author
  • New Participant
  • 14 replies
  • May 4, 2022

So this is the full code, if I’ve missed anything. I have turned on Developer VM yeah

figma
	.importComponentByKeyAsync(key)
	.then(stickerSheet => {
		console.log('sticker sheet loaded');
	})
	.catch(() => figma.notify('Avatars failed to load, please restart the plugin. If this persists, contact #figma.'));


figma.closePlugin();

Gleb
  • Power Member
  • 4708 replies
  • May 4, 2022

Yeah as I expected you are closing the plugin before the async function finishes.


Lewis_Healey
  • Author
  • New Participant
  • 14 replies
  • May 4, 2022

You are the BEST!

For future reference for any n00bs like me

figma
	.importComponentByKeyAsync(key)
	.then(stickerSheet => {
		console.log('sticker sheet loaded');
        figma.closePlugin();
	})
	.catch(() => figma.notify('Avatars failed to load, please restart the plugin. If this persists, contact #figma.'));


James_Grubb1

Just wondering how to handle other functions that also need to run do they all have to go inside the promise?


Gleb
  • Power Member
  • 4708 replies
  • June 23, 2023

I usually use a global async function for that. Something like:

async function main() {
  await function1()
  await function2()
}

main()

James_Grubb1

Do I need to call each function inside the main function?


Gleb
  • Power Member
  • 4708 replies
  • June 26, 2023

The idea with the main function is you are creating a global async runtime for your whole plugin. I don’t understand your question though. You can still call other functions inside of other functions inside the main function, you just shouldn’t call them in the global scope where the main function runs as this basically breaks the whole purpose of creating a global async function.


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