Config "build.target" option documentation is confusing

[Lenni009]

Documentation is

• [ ] Missing
• [ ] Outdated
• [X] Confusing
• [ ] Not sure?

Explain in Detail

I'm currently investigating why Vite doesn't use the esnext target for the vite build command, even though it is set as target and module in tsconfig.json.

I had to set build.target to esnext in order for the build to succeed.

I expected that this would be pulled from tsconfig.json if it wasn't explicitly given in the vite.config.ts.

Vite's docs are not really helpful here.

https://vitejs.dev/guide/features#target:

Vite does not transpile TypeScript with the configured target value by default, following the same behaviour as esbuild.

• "with the configured target value" -> configured where? In the tsconfig.json file? In the vite.config.ts file?

The esbuild.target option can be used instead, which defaults to esnext for minimal transpilation. In builds, the build.target option takes higher priority and can also be set if needed.

• "can be used instead" -> instead of what? (probably references the thing in my first question)
• "In builds [...]" -> This implies that the entire section before only applies to dev, not prod. This should be clarified.
• "takes higher priority" -> Higher priority over what? esbuild.target? tsconfig.json?

In the warning box, there's this:

If target is not ESNext or ES2022 or newer, or if there's no tsconfig.json file [...]

• target where? In tsconfig.json or in build.target?
• This implies that Vite does indeed pull values from tsconfig.json, or at least checks for its existance.

Tl;dr: What I expect: If I set target in my tsconfig.json, build.target should follow that if build.target is undefined. What is actually happening: target in tsconfig.json has no effect on build.target. build.target must be explicitly set in order for the build to succeed.

Your Suggestion for Changes

- Vite does not transpile TypeScript with the configured target value by default
+ Vite does not transpile TypeScript to older ES standards by default

Something I'm not quite sure on: Does esbuild.target always use esnext if not specified otherwise, regardless of environment?

- which defaults to esnext for minimal transpilation.
+ which defaults to esnext during development for minimal transpilation.

The target environment is clearly different between dev and prod (dev targeting esnext, while prod uses es2020) -> should also be specified in that section (it's already more or less written down in https://vitejs.dev/guide/#browser-support and https://vitejs.dev/guide/build.html#browser-compatibility)

It should also be noted that build.target is not taken from tsconfig.json if build.target is undefined and target is defined in tsconfig.json.

It was also noted in #13756 that there should be only one single point to define target, which should be in the tsconfig.json. So maybe this should be made into a feature issue, since there's clearly demand for this feature.

Reproduction

https://github.com/Lenni009/vite-build-target-issue

Steps to reproduce

• clone repo
• run npm i
• run npm run build

-> build fails

• Go into vite.config.ts
• Uncomment the target property
• Save the file
• Run npm run build

-> Build succeeds -> default build.target does not match target in tsconfig.json

[oleksandr-danylchenko]

What I expect: If I set target in my tsconfig.json, build.target should follow that if build.target is undefined. What is actually happening: target in tsconfig.json has no effect on build.target. build.target must be explicitly set in order for the build to succeed.

Thanks for pointing it out! I stumbled into the same issue myself today!

[BearKid]

I use create-vue to generate a sample project, which contains vite and typescript configuration files. I feel like I'm completely lost in the front-end build tools. Vite config file has build.target, and the tsconfig file has configuration items such as module and target., I can't figure out how the two work together.