← Back to patterns

Dynamic Import (No # Syntax Test)

Testing if {await import()} works without the # symbol

Pattern Comparison:

With # (Standard)

{#await import('./component.svelte')}
  <p>Loading...</p>
{:then { default: Component }}
  <Component />
{/await}

Without # (Test)

{await import('./component.svelte') then { default: Component }}
  <Component />
{/await}

Test 1: Standard {#await} syntax

Loading component with {#await} syntax...

Test 2: Without # syntax (experimental)

Note: The syntax {await} without # is not valid in Svelte 5. The # is required for block statements like await, if, each, etc.

If this code compiles, it would be displayed below. Otherwise, you'll see a compiler error in the console.

✗ Syntax {await} without # is invalid in Svelte 5

Block statements require the # prefix. Use {#await} instead.

Conclusion: Svelte 5 requires the # prefix for all block statements including {#await}, {#if}, and {#each}. The syntax without # is not valid and will cause a compiler error. Always use {#await} for dynamic imports and async operations.