Top level await for import() function stopped working in Chrome

Antony92 commented 1 month ago

Describe the bug

For some reason when building for production and using top level await for an import() function that imports a module which imports another module the import() never completes with await. This started happening recently on Chrome (on Safari and Firefox it works fine) and this does not happen when running in dev mode. Not really sure if the issue is Chrome related or with vite bundle when running for production.

Here is a quick summary of the reproduce link:

We have a main.ts file with a top level await import for module1.ts

import './style.css';

const div = document.querySelector('div')!;

await import('./module1');

div.innerHTML = 'Finished...';

module1.ts includes an export of function that imports another module. In this case module2.ts

export const randomFunction = () => {
  import('./module2');
};

Now running this with stackblitz in dev mode npm run dev you should see "Finished" displayed on both Chrome and Safari. Running npm build-prod and then npm run preview displays "Finished" in Safari, but in Chrome await import('./module1') never completes and you should see "Loading..."

Workaround is to use import('./module1').then(() => // code to be executed after module load) instead of await import('./module1');

Reproduction

https://stackblitz.com/edit/vitejs-vite-85uvzu?file=src%2Fmain.ts

Steps to reproduce

npm run build-prod npm run preview

System Info

System:
    OS: macOS 15.0
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.43 GB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - /usr/local/bin/node
    npm: 10.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 129.0.6668.59
    Safari: 18.0
  npmPackages:
    vite: ~5.4.6 => 5.4.6

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 month ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-85uvzu (Open reproduction)

bluwy commented 1 month ago

From your system info, I think you're hitting a chrome bug:

JohnGreek commented 1 month ago

I reproduced it in a fresh Vite (Vanilla) project. await import in dev mode works ok, build & preview is blank on v129.0.6668.59 Chromium-based browsers.

I also tested await import with React+Typescript+SWC (fresh project again) and it's the opposite. Dev mode shows empty screen and when built and previewed, it's working ok.

Nettsentrisk commented 1 month ago

Can confirm, a relatively simple app created with @vitejs/plugin-react-swc is now behaving this way, producing a blank page, in Chrome/Edge 129. Running the same app in Opera 113 works fine.

There's no use of await import in user code in this project, so I'm guessing some internal Vite use (or @vitejs/plugin-react-swc) is what's manifesting the issue.

Anything that can be done other than using another browser and waiting for an update to Chrome/Edge?

jardenliu commented 1 month ago

Can confirm, a relatively simple app created with @vitejs/plugin-react-swc is now behaving this way, producing a blank page, in Chrome/Edge 129. Running the same app in Opera 113 works fine.

There's no use of await import in user code in this project, so I'm guessing some internal Vite use (or @vitejs/plugin-react-swc) is what's manifesting the issue.

Anything that can be done other than using another browser and waiting for an update to Chrome/Edge?

try vite-plugin-top-level-await?

jefflundberg commented 1 month ago

This seems to be related to a Chromium bug.

Reproduction of the bug

It's fixed in Chrome 130 available via the Canary nightly build or Microsoft Edge Canary and Dev Channel Builds.

SkyWalker653 commented 1 month ago

I am using vite-plugin-top-level-await plugin as a temporary workaround.

NickdeK commented 1 month ago

~@SkyWalker653 This has done the trick for us, thanks for sharing, much appreciated!~ ~Spoke to soon, it did not work...~

It eventually did work but we loaded the plugin to late and in the wrong place. We are using Quasar with boot files and we had to add it to the vitePlugins in the quasar config to make this work.

Nettsentrisk commented 2 weeks ago

Problem seems to be gone for me in Edge 130.

sapphi-red commented 1 week ago

Closing as this seems to be fixed in chromium 130 and chrome/edge 130 has been released.

vitejs / vite