javascriptasync-awaites6-modulestop-level-await

Top level await not working in ECMAScript


I am rather confused as I have read that top level await is supported in ESM but when I try it out in a html file it does not work?

Were I found that is says: Top-level await does not work with node 14.13.- "Top-level await only works with ESM modules"

Is top level await supported in ESM and if how can I use it.

document.getElementById('foo').innerHTML = 'hello1';
await pause(2000); // is this possible if so how
document.getElementById('foo').innerHTML = 'hello2';

Solution

  • Yes, it's supported in ESM - ES6 modules. It's not supported in plain script tags.

    <script>
    await Promise.resolve();
    </script>

    You need to specify that the script is a module for it to work.

    <script type="module">
    await Promise.resolve();
    console.log('finished successfully');
    </script>

    (Also make sure that you're running this in a supported environment - older environments may not support top-level await)