Trying to write my first app - await is only allowed within async functions

TWu · ‎Dec 04, 2020

I’m trying to create my first app with the functionality to copy records from 1 table to another.

I have been following examples here on the Record Picker and Spreadsheet importer: Airtable Scripting

I run into the error:
/Users/dev/.nvm/versions/node/v14.15.0/lib/node_modules/@airtable/blocks-cli/transpiled/src/builder/frontend/index.js: 'await' is only allowed within async functions (9:15)

My code was modified from Hello World:

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';

function HelloWorldApp() {
    
	let sourceTable = base.getTable('Source');
	let targetTable = base.getTable('Target');

	let records = await sourceTable.selectRecordsAsync();

	while (records.length > 0) {
		await targetTable.createRecordsAsync(records.slice(0, 50));
		records = records.slice(50);
	}

    return <div>All Done 🚀</div>;
}

initializeBlock(() => <HelloWorldApp />);

Any ideas here? This is my first time setting up a node.js development environment

Martin_Kopischk · ‎Dec 05, 2020

Hey Thomas, the error message is telling you what to do: you need to make your function asynchronous:

async function HelloWorldApp() {
  // code ommitted
}

– note the async keyword in front of the function.

It looks like you are taking your first exploratory steps with JavaScript. Doing this via trial and error is a perfectly fine way to learn a programming language (it’s how I learned my first “real” programming language, Ruby), but when you hit snags, as will inevitably happen, I recommend taking time to read the documentation. In the case of Javascript, you will find the language and standard library reference on the Mozilla Developer Network (or MDN, as it is colloquially known), specifically, in this case

Generally speaking, I’ve found asynchronous programming at the harder end of concepts to grasp. One thing that might help is to understand that asynchronicity, in programs, is contagious: once you introduce it into a system, everything to do with it necessarily becomes asynchronous, too. Hence the need for an async function to wrap await.

kuovonne · ‎Dec 05, 2020

Are you writing a custom app or a Scripting app? Your post contains references to both. It looks like you are trying to use a Scripting app script within a Custom app.

You are seeing the error about the base not being defined because you have not imported the base into your React file. That error is unrelated to the await/async error. Both errors are grammatical errors that prevent your code from running. When your code won’t run, the error message simply shows the first error that prevents it from running, not any subsequent errors it might encounter. (Note that the “first” error is the first error encountered when processing the code, not necessarily the first error according to line numbers.)

Although there is a lot of overlap between the two platforms, they are different. You cannot directly dump code from Scripting app into Custom app in the manner you have done.

I recommend learning the basics of scripting in Scripting App and the basics of React as two separate things before putting together a Custom app.

If you simply want to copy data from one table to another, that can be done in just Scripting App.

TWu · ‎Dec 05, 2020

Thank you for these resources, I would love to get an overview of the language as I jump in!

TWu · ‎Dec 05, 2020

I thought the only distinction was App vs Automation. Had no idea there was a scripting vs custom designation. Scripting App will be just fine for me, appreciate you breaking down the distinction for me!

Olpy_Acaflo · ‎Dec 05, 2020

Hi @TWu,

Here’s a very good Scripting App ressource
by @JonathanBowen

and another by @VictoriaPlummer

Don’t forget to visit Scripting Apps by Experts and Airtable’s DEVs here in the Scripting app Community : a big lot of typical use cases have been covered.

oLπ