await is only valid in async functions and the top level bodies of modules as it is in top level body

user_18259066 0
Viewed 887

I am trying to create a SupaDB client for Steam, more info. When I check the website console, I get the following error message, even when node file.js is used, same error is being given. Which the error is:

SyntaxError: await is only valid in async functions and the top level bodies of modules

As the info provided, the error also includes that the line where the error occurs is line 8...

Full log:

const { data, error } = await supabase.from("steam").select("*")
                        ^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47

const supabase = createClient("https://gqkuommdmfzmwkzdewma.supabase.co", 
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imdxa3VvbW1kbWZ6bXdremRld21hIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDkyNjQyNTIsImV4cCI6MTk2NDg0MDI1Mn0.iF651HDhqynAQRlG8T6wFS3ZEx4dqxHiEiguc0m7-zI", {
  headers: {
    Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZWNyZXQiOiI3MjU5YTg2ZDVlMTE1YTM2ODRjMjdlNGUiLCJpYXQiOjE2NTAyODg1MzJ9.43EriTTwaDLeepFTbRoZXJksqCtIrjMZ-yHHMDuK0_4"
  }
})

const { data, error } = await supabase.from("steam").select("*")

    if (error) {
        console.log('Error occurred:', error)
        }
    else {
        console.log(data)
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link CSS and JavaScript to HTML -->
    <link rel="stylesheet" href="style.css">
    <script src="code.js"></script>
</head>
<body>
    
</body>
</html>
node.js html javascript
3 Answers

Unless you are using the latest version of NodeJS which supports top level await, you cannot use await outside of an async function.

You can work around this by encapsulating your code in an IIFE function:

(async() => {
  // your code using await goes here
  const supabase = createClient("https://gqkuommdmfzmwkzdewma.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imdxa3VvbW1kbWZ6bXdremRld21hIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDkyNjQyNTIsImV4cCI6MTk2NDg0MDI1Mn0.iF651HDhqynAQRlG8T6wFS3ZEx4dqxHiEiguc0m7-zI", {
  headers: {
    Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZWNyZXQiOiI3MjU5YTg2ZDVlMTE1YTM2ODRjMjdlNGUiLCJpYXQiOjE2NTAyODg1MzJ9.43EriTTwaDLeepFTbRoZXJksqCtIrjMZ-yHHMDuK0_4"
  }
})

const { data, error } = await supabase.from("steam").select("*")
    if (error)
      console.log('Error occurred:', error)
    else
      console.log(data)
})()
user_119081450

await is only valid in async functions

This means you can only use await if your function is async. Right now you are just using keyword await without async

let dummyMethod = async () => {
    const supabase = createClient("https://gqkuommdmfzmwkzdewma.supabase.co",
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imdxa3VvbW1kbWZ6bXdremRld21hIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDkyNjQyNTIsImV4cCI6MTk2NDg0MDI1Mn0.iF651HDhqynAQRlG8T6wFS3ZEx4dqxHiEiguc0m7-zI", {
            headers: {
                Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZWNyZXQiOiI3MjU5YTg2ZDVlMTE1YTM2ODRjMjdlNGUiLCJpYXQiOjE2NTAyODg1MzJ9.43EriTTwaDLeepFTbRoZXJksqCtIrjMZ-yHHMDuK0_4"
            }
        })

    const {
        data,
        error
    } = await supabase.from("steam").select("*")

    if (error) {
        console.log('Error occurred:', error)
    } else {
        console.log(data)
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link CSS and JavaScript to HTML -->
    <link rel="stylesheet" href="style.css">
    <script src="code.js"></script>
</head>
<body>
    
</body>
</html>

Now you will not get an error message. Since we are wrapping your await in async method.

Nothing will log to console, since I'm not calling the dummyMethod.

user_74824270

You can add a "type":"module" at your package.json file and that will allow you to use top level await

user_186825850
Related