Trying to import a dependency using an ESM import() statement fails

[hriverahdez]

Describe the bug

I am trying to dynamically import a dependency from node modules, based on a condition. In this case I want to use the package https://www.npmjs.com/package/@gtm-support/vue-gtm for google tag manager. This package is a Vue plugin but I don't want to import it and register the plugin based on some condition I receive from my infra during startup.

The code looks roughly like this

if (optionalTracking) {
  const { createGtm } = await import('@gtm-support/vue-gtm');
  app.use(createGtm({ id: 'GTM-1234567', defer: true }));
}

This works during dev, but not during build. I debugged the unminified prod build output and it seems like the __vitePreload function has a promise that silently fails, cannot be caught and simply halts execution. Then then clause is never executed, and neither is code that follows the import statement.

I've looked around multiple issues and the only one that seems to ring a bell is this closed one

#2009

where it's mentioned that this __vitePreload function could fail and never resolve. Though still could be unrelated, I'm not sure.

Is what I'm trying to achieve not possible/currently supported? Or am I missing something that might be in the docs?

Reproduction

https://stackblitz.com/edit/vitejs-vite-tdaeem?file=src%2Fmain.js

Steps to reproduce

You'll notice the app will start just fine for dev mode. I've added the serve package which allow you to run the prod build. So if you execute:

> npm run build
> serve -l 5173 dist/

You'll see that the app is no longer mounted.

System Info

System:
    OS: Linux 6.6 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 3.09 GB / 30.58 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.0/bin/npm
    pnpm: 9.1.4 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.1.2 
    vite: ^5.1.6 => 5.4.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

It look like this is a top-level-await dead lock as @gtm-support/vue-gtm chunk is importing nextTick from vue in the entry chunk. This is a duplicate of #16520 (comment). See linked comment for the workaround.

[hriverahdez]

It look like this is a top-level-await dead lock as @gtm-support/vue-gtm chunk is importing nextTick from vue in the entry chunk. This is a duplicate of #16520 (comment). See linked comment for the workaround.

hm, Interesting.... I have other top-level awaits on my main file though and those have been working fine so far. Only this new change seems to be causing it. Nevertheless I will test it out.

EDIT: ah wait, you probably meant that it's caused by top-level await and this particular lib, because of the nextTick import. Got it