Fix: Top-level await is not available in the configured target error

The ‘Top-level await is not available in the configured target’ error occurs when using top-level await (await outside of async functions) in environments that don’t support it, typically due to outdated compilation targets or missing configuration.

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error in unsupported environments
const data = await fetch('/api/data'); // ❌ Top-level await not supported
// Error: Top-level await is not available in the configured target

✅ Quick Fix - Enable Top-Level Await

Solution 1: Update TypeScript Configuration

// ✅ In tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022", // ✅ ES2022+ supports top-level await
    "module": "ES2022",
    "moduleResolution": "node"
  }
}

Solution 2: Update Babel Configuration

// ✅ In babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "14.8" // ✅ Node 14.8+ supports top-level await
        }
      }
    ]
  ]
}

Solution 3: Wrap in Async Function

// ❌ Top-level await without support
// const data = await fetch('/api/data');

// ✅ Wrap in async IIFE (Immediately Invoked Function Expression)
const main = async () => {
  const data = await fetch('/api/data');
  return data.json();
};

main().catch(console.error);

Solution 4: Use ES Module in Browser

<!-- ✅ In HTML, use type="module" for top-level await support -->
<script type="module">
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
</script>