Skip to main content

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?

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

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

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.

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

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

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

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

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


async function main() {

  await function1()

  await function2()

}



main()

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

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


Terms & ConditionsCookie settings