Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

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

Topic Labels: Custom Extensions
3664 5
cancel
Showing results for 
Search instead for 
Did you mean: 
TWu
6 - Interface Innovator
6 - Interface Innovator

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)

If I remove await commands, then I run into:
ReferenceError: base is not defined
at HelloWorldApp (https://localhost:9000/__runFrame/bundle.js:59:21)
at renderWithHooks (https://localhost:9000/__runFrame/bundle.js:59844:18)
at mountIndeterminateComponent (https://localhost:9000/__runFrame/bundle.js:62524:13)
at beginWork (https://localhost:9000/__runFrame/bundle.js:63648:16)
at HTMLUnknownElement.callCallback (https://localhost:9000/__runFrame/bundle.js:45207:14)
at HTMLUnknownElement.e._wrapped (https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/1.9.0/rollbar.nojson.min.js:1:13806)
at Object.invokeGuardedCallbackDev (https://localhost:9000/__runFrame/bundle.js:45256:16)
at invokeGuardedCallback (https://localhost:9000/__runFrame/bundle.js:45311:31)
at beginWork$1 (https://localhost:9000/__runFrame/bundle.js:68253:7)
at performUnitOfWork (https://localhost:9000/__runFrame/bundle.js:67204:12)

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

5 Replies 5
Martin_Kopischk
7 - App Architect
7 - App Architect

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.

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.

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

TWu
6 - Interface Innovator
6 - Interface Innovator

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!

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π