Explicitly setting targets does not prevent @vitejs/plugin-legacy from overriding build.target

[kingyue737]

Describe the bug

I set targets to @vitejs/plugin-legacy but it still thrown the following warning and overrode the build.target of vite

plugin-legacy overrode 'build.target'. You should pass 'targets' as an option to this plugin with the list of legacy browsers to support instead.

Reproduction

https://stackblitz.com/edit/vitejs-vite-jblb6v

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-legacy: ^2.2.0 => 2.2.0 
    vite: ^3.1.0 => 3.1.3

Used Package Manager

pnpm

Logs

Click to expand!

plugin-legacy overrode 'build.target'. You should pass 'targets' as an option to this plugin with the list of legacy browsers to support instead.
vite v3.1.3 building for production...
✓ 6 modules transformed.
dist/assets/index-legacy.44c97cd8.js       0.82 KiB / gzip: 0.46 KiB
dist/assets/polyfills-legacy.0bdf908e.js   7.69 KiB / gzip: 3.02 KiB
[vite:esbuild-transpile] Transform failed with 1 error:
assets/index.3e92d52e.js:78:0: ERROR: Top-level await is not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides)

Top-level await is not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides)
75 |  `;
76 |  async function testFunction() {}
77 |  
   |   ^
78 |  await testFunction();
   |  ^
79 |  

error during build:
Error: Transform failed with 1 error:
assets/index.3e92d52e.js:78:0: ERROR: Top-level await is not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides)
    at failureErrorWithLog (/home/projects/vitejs-vite-jblb6v/node_modules/esbuild/lib/main.js:1560:15)
    at eval (/home/projects/vitejs-vite-jblb6v/node_modules/esbuild/lib/main.js:799:29)
    at responseCallbacks.<computed> (/home/projects/vitejs-vite-jblb6v/node_modules/esbuild/lib/main.js:665:9)
    at handleIncomingPacket (/home/projects/vitejs-vite-jblb6v/node_modules/esbuild/lib/main.js:720:9)
    at Socket.readFromStdout (/home/projects/vitejs-vite-jblb6v/node_modules/esbuild/lib/main.js:641:7)
    at EventEmitter.emit (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:6:155574)
    at addChunk (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:6:656716)
    at readableAddChunk (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:6:656420)
    at Readable.push (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:6:657104)
    at _0x2c02e0.onStreamRead [as onread] (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:6:784218)
    at Object.emit (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:8:260654)
    at _0x4eee04 (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:8:262245)
    at Object._0x53c4f8 [as emit] (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:8:258979)
    at https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:8:261534
    at Map.forEach (<anonymous>)
    at _0x23c12f (https://vitejs-vite-jblb6v.w.staticblitz.com/blitz.7ba26c6ffacbe3dc56a359771563b57f616b4d0d.js:8:261505)

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]

Currently it does not make sense to set build.target when using plugin-legacy. What is the reason of setting that?

[kingyue737]

@sapphi-red

I just want to specify the target of esbuild to chrome 90+. But it seems that the target is always "chrome64", "edge79", "es2020", "firefox67", "safari11.1" no matter what I set in build.target and legacy plugin's targets.

It always throws error during building:

[vite:esbuild-transpile] Transform failed with 1 error:
assets/index.3e92d52e.js:78:0: ERROR: Top-level await is not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides)

[kingyue737]

Since plugin-legacy can be used to generate only modern polyfills (it does have modernPolyfills: true and renderLegacyChunks: false options), I think it's strange for this plugin to pin the target.

[sapphi-red]

So you are using plugin-legacy to generate only modern polyfills? I think we could avoid pinning the target when renderLegacyChunks: false.

If you want to avoid transpiling top-level-await for modern chunk and transpile top-level-await for legacy chunk, this was not working from before. Modern chunk was used for Chrome64+ that includes browsers not supporting top-level-await, but it contained top-level-await as-is.

[kingyue737]

So you are using plugin-legacy to generate only modern polyfills?

Yes.

I think we could avoid pinning the target when renderLegacyChunks: false.

Agree!

By the way, I think if plugin-legacy needs to override build.target of esbuild-transpile, it is better that it can use plugin's targets instead of a fixed preset. Maybe map browserslist compatible configs to esbuild target config.