The unexpected execution order of dynamic import under UMD build

[decadef20]

Describe the bug

Code Snippet:

// main.ts
(async function load() {
  console.log("[1] run main.ts");
  const asyncAction = await import("./asyncAction");

  asyncAction.default();

  await import("./loadApp");
})();

// asyncAction.ts
console.log("[2] async action logged");

export default () => {
  console.log("[3] run async action");
};

// loadApp.js
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

console.log("[4] run loadApp");

createApp(App).mount("#app");

Expected Execution Order: [1] => [2] => [3] => [4]

Issue Details:
When running the code in UMD format, the execution order of the logs is different from the expected order. The logs are displayed as "[1] => [2] => [4] => [3]". However, under dev mode and ES format of production mode, the execution order is correct.

Reproduction

https://codesandbox.io/p/devbox/async-await-5nxz53

Steps to reproduce

1. Change format to es or umd in vite.config.ts
2. npm run build && npm run preview
3. Check the console panel

System Info

[email protected]

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.

[sapphi-red]

Dynamic imports in UMD are not supported by rollup. To make that work, Vite enables output.inlineDynamicImports but that does not keep the execution order (rollup/rollup#4166).