Errors when using importComponentByKeyAsync

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.