vite6 [commonjs--resolver] node_modules/testb/a.js (1:6): await isn't allowed in non-async function

[zhangHongEn]

Describe the bug

Everything works fine with Vite 5.

Top-level await in node_modules.
module-federation/vite#201

Reproduction

https://github.com/zhangHongEn/vite-mf-bug

Steps to reproduce

npm install && npm run build

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Memory: 2.71 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.6.0 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  Browsers:
    Safari: 17.3.1

Used Package Manager

npm

Logs

> vite-project@0.0.0 build
> vite build

vite v6.0.1 building for production...
✓ 9 modules transformed.
x Build failed in 104ms
error during build:
[commonjs--resolver] node_modules/.pnpm/test-top-level-await@1.0.0/node_modules/test-top-level-await/a.js (1:6): await isn't allowed in non-async function
file: /Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/test-top-level-await@1.0.0/node_modules/test-top-level-await/a.js:1:6

1: await 1
         ^
2: exports = {}

    at getRollupError (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at ParseError.initialise (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/node-entry.js:13286:28)
    at convertNode (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/node-entry.js:14997:10)
    at convertProgram (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/node-entry.js:14240:12)
    at Module.setSource (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/node-entry.js:15983:24)
    at async ModuleLoader.addModuleSource (file:///Users/zhanghongen/Desktop/zwork/open-code/testdir/vite-project/node_modules/.pnpm/rollup@4.28.0/node_modules/rollup/dist/es/shared/node-entry.js:19879:13)

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]

It doesn't work with Vite v5 too.
https://stackblitz.com/edit/github-441yb3?file=package.json&terminal=build

I don't think this should work because top-level await cannot be used in CJS (nodejs/node#21267).

[zhangHongEn]

Have you tried the build mode?

…

---- Replied Message ---- | From | ***@***.***> | | Date | 12/02/2024 09:28 | | To | vitejs/vite ***@***.***> | | Cc | zhn ***@***.***>, Author ***@***.***> | | Subject | Re: [vitejs/vite] vite6 [commonjs--resolver] node_modules/testb/a.js (1:6): await isn't allowed in non-async function (Issue #18850) | It doesn't work with Vite v5 too. https://stackblitz.com/edit/github-441yb3?file=package.json&terminal=build I don't think this should work because top-level await cannot be used in CJS (nodejs/node#21267). — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[sapphi-red]

Yes, I have.

[zhangHongEn]

I don't have a computer with me right now. I'll check it tonight

…

---- Replied Message ---- | From | ***@***.***> | | Date | 12/02/2024 09:33 | | To | vitejs/vite ***@***.***> | | Cc | zhn ***@***.***>, Author ***@***.***> | | Subject | Re: [vitejs/vite] vite6 [commonjs--resolver] node_modules/testb/a.js (1:6): await isn't allowed in non-async function (Issue #18850) | Yes, I have. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[zhangHongEn]

My code is very simple. I think as long as Vite can skip the checks, vite-plugin-top-level-await can handle it.

const remoteReact = await moduleFederation.import('react', "^18.0.1")
module.exports = remoteReact

[zhangHongEn]

https://github.com/module-federation/vite/blob/aaa23f59a8fbc7fc054010ba453bdc20186f9ac0/src/virtualModules/virtualShared_preBuild.ts#L53

[zhangHongEn]

My code is very simple. I think as long as Vite can skip the checks, vite-plugin-top-level-await can handle it.

const remoteReact = await moduleFederation.import('react', "^18.0.1")
module.exports = remoteReact

However, if there are other ways to implement this runtime module, I’m more than happy to make changes.

[sapphi-red]

It seems setting build.commonjsOptions.strictRequires: 'auto' works. (Note that test-top-level-await/a.js should include module.exports instead of exports, otherwise the CJS conversion should not run).

When strictRequires is true (which is a safer value and Vite 6 now uses that), the commonjs plugin wraps the module with IIFE and the plugin doesn't expect await to be used in the module. Because the IIFE is not a async function, the error happens.

Setting build.commonjsOptions.strictRequires: 'auto' would make the build work. But note that setting that option may cause non-deterministic builds (rollup/plugins#1425).

Instead of relying on the CJS plugin, you might be able to use the syntheticNamedExports option.
https://rollupjs.org/plugin-development/#synthetic-named-exports

[zhangHongEn]

Can syntheticNamedExports be used in dev mode?

[sapphi-red]

No, syntheticNamedExports won't work in dev.

[zhangHongEn]

I previously used syntheticNamedExports, but I removed it to maintain consistency between the dev and build processes.

[sapphi-red]

I'm not sure why your code worked in dev. esbuild doesn't support top-level-await in CJS as well.
https://esbuild.github.io/try/#YgAwLjI0LjAALS1mb3JtYXQ9ZXNtAGUAZm9vLmNqcwBjb25zdCByZW1vdGVSZWFjdCA9IGF3YWl0IDEKbW9kdWxlLmV4cG9ydHMgPSByZW1vdGVSZWFjdA
Do you run commonjs plugin in dev as well?

[zhangHongEn]

I used to do it this way:
Dev:
export default runtimeModule + optimizeDeps.needsInterop
Build:
syntheticNamedExports

But later, for consistency and simplicity, I changed it to:
module.exports = await runtimeModule

[zhangHongEn]

I'm not sure why your code worked in dev. esbuild doesn't support top-level-await in CJS as well. https://esbuild.github.io/try/#YgAwLjI0LjAALS1mb3JtYXQ9ZXNtAGUAZm9vLmNqcwBjb25zdCByZW1vdGVSZWFjdCA9IGF3YWl0IDEKbW9kdWxlLmV4cG9ydHMgPSByZW1vdGVSZWFjdA Do you run commonjs plugin in dev as well?

You’re right. Since chunks aren’t merged in dev mode, I can easily handle the replacement of top-level await.

https://github.com/module-federation/vite/blob/aaa23f59a8fbc7fc054010ba453bdc20186f9ac0/src/plugins/pluginDevProxyModuleTopLevelAwait.ts#L13

https://github.com/module-federation/vite/blob/aaa23f59a8fbc7fc054010ba453bdc20186f9ac0/src/virtualModules/virtualShared_preBuild.ts#L53

[sapphi-red]

I see. I don't have any ideas other than (a) going back to optimizeDeps.needsInterop/syntheticNamedExports or (b) set build.commonjsOptions.strictRequires: 'auto' and hope that the builds are stable.

[zhangHongEn]

ok thanks