Skip to main content

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

T
Forum|alt.badge.img+2
  • TWu
  • Inspiring
  • 17 replies

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

    M
    Forum|alt.badge.img+4

    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.

    T
    kuovonne
    2 people like this
    • T
      TWu
    • kuovonne
      kuovonne
    kuovonne
    Forum|alt.badge.img+27
    • kuovonne
    • Brainy
    • 6002 replies
    • December 5, 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.

    T
    B
    2 people like this
    • T
      TWu
    • B
      Bill_French
    T
    Forum|alt.badge.img+2
    • TWu
    • Author
    • Inspiring
    • 17 replies
    • December 5, 2020
    Martin_Kopischk wrote:

    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.


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

    T
    Forum|alt.badge.img+2
    • TWu
    • Author
    • Inspiring
    • 17 replies
    • December 5, 2020
    kuovonne wrote:

    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.


    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!

    O
    Forum|alt.badge.img+18
    • Olpy_Acaflo
    • Inspiring
    • 251 replies
    • December 5, 2020
    TWu wrote:

    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π

    JonathanBowen
    V
    2 people like this
    • JonathanBowen
      JonathanBowen
    • V
      VictoriaPlummer

    Reply


    Most helpful members this week

    Terms & Conditions