Errors when using importComponentByKeyAsync

Plugin and Widget API Bugs
#1

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?

#2

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

#3

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);
#4

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.

#5

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();
#6

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

1 Like
#7

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.'));