vite: Wrong esbuild target when using `vite dev`

Describe the bug

When setting a build target in the config using either build.target or esbuild.target, this only applies to vite build. So far, this is expected, since #10207 automatically sets the esbuild target to esnext when using vite dev. However, when I import a library that requires the target to be set to esnext (bson for example) and try running vite dev I get this error message:

[ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

Running vite build works fine. So I am wondering, why the target environment during vite dev is set to the default target instead of esnext.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rfowdk?file=main.js

Steps to reproduce

Running vite build succeeds
Running vite dev fails

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^4.4.0 => 4.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.

About this issue

Original URL
State: open
Created a year ago
Comments: 15 (6 by maintainers)

Most upvoted comments

Glad to answer your questions.

Vite use esbuild to pre-bundle dependencies in node_modules. For pre-bundle stage, optimizeDeps.esbuildOptions is used as transform api’s parameter. You can try it.

https://github.com/vitejs/vite/blob/c8a741adec14568f2ba9599056cb2eebab52215f/packages/vite/src/node/optimizer/index.ts#L809

I just tried it, and it work. https://github.com/haijie-x/vite-issues/tree/master/esbuild-target

Not sure if I misunderstood you, but I hope this can help you.

hai-x on Jul 10, 2023

@bluwy I may be misunderstanding something, but I’m not sure if separating the targets for build vs dev is a good default behavior. I could see it being a useful opt-in behavior if it’s explicitly set. With the exception of minification, I expect (or hope) my code will have the same output in both scenarios because debugging/fixing something is much more difficult if it is built for a different environment.

treardon17 on Jul 26, 2023