error: "Cannot use keyword 'await' outside an async function", why?

[frederikhors]

Describe the bug
In ./generated/index.ts I'm using this code:

import type { PlayerServiceClient } from './generated/player.client';

let playerService: PlayerServiceClient;

const playerClient = await import('./generated/player.client');

export const player = (): PlayerServiceClient =>
	playerService ||
	((playerService = new playerClient.PlayerServiceClient({})), playerService);

Logs
Cannot use keyword 'await' outside an async function

Expected behavior
I would like to use this because I need lazy load of many files and I would like to use it like this in my components:

import { player } from "../generated";

let players: Player[];

(async () => {
  players = await player.queryPlayers({ playerId: "1" });
})();

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers:

  System:
  OS: Windows 10 10.0.19042
  Binaries:
  Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
  npm: 7.8.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
  @sveltejs/kit: 1.0.0-next.71 => 1.0.0-next.71
  svelte: 3.37.0 => 3.37.0
  vite: 2.1.5 => 2.1.5

• Your browser: Chrome

• Your adapter: static

[dymoo]

Why not just

export default async function() {
let playerService: PlayerServiceClient;

const playerClient = await import('./generated/player.client');

return () = PlayerServiceClient =>
	playerService ||
	((playerService = new playerClient.PlayerServiceClient({})), playerService);
}

[frederikhors]

Because I think is the same. I have double await in components, right?

I would like to have only one await.

How do you call that in components?

[Conduitry]

The top-level await proposal hasn't reached stage 4 (accepted) and isn't supported by Acorn, the parser we're using.

[frederikhors]

@Conduitry I read here that there is an option for acorn: allowAwaitOutsideFunction.

How can I set this option in my svelte kit environment?

[frederikhors]

I think with this I can write this code:

const playerService = await player();
const { response } = await playerService.queryPlayers({ playerId: "1" });

if (response) {
  players = response.players;
}

instead of:

(async () => {
  const playerService = await player();
  const { response } = await playerService.queryPlayers({ playerId: "1" });

  if (response) {
    players = response.players;
  }
})();

Right?