The vite.build.target setting does not take effect in dev mode.

Astro Info

Astro                    v5.0.3
Node                     v22.2.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The vite.build.target setting does not take effect in dev mode.

I want to use the decorator feature introduced in TypeScript 5.0.
https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators
This new decorator feature is supported in esbuild 0.21.0 and above.
https://github.com/evanw/esbuild/releases/tag/v0.21.0
According to the esbuild documentation, by specifying a target value lower than "esnext" (such as "es2022"), decorators will be transformed and can be executed in Node.js.
https://esbuild.github.io/content-types/#javascript

In an Astro project, esbuild is executed via Vite, but by default, the target seems to be set to "esnext".
So, I added the following configuration to astro.config.mjs:

export default defineConfig({
  vite: {
    build: { target: 'es2018' },
  }
});

This configuration works as expected when running npm run build, and the decorators are transformed.
However, when running npm run dev, the decorators are not transformed, resulting in an "Invalid or unexpected token" error.
(Incidentally, if the target is not specified, the decorators are not transformed even during npm run build, resulting in the same error.)

What's the expected result?

I expect the vite.build.target setting to take effect during npm run dev as well, so that the decorators are transformed and the above error does not occur.

Link to Minimal Reproducible Example

https://stackblitz.com/github/koyopro/astro-debug/tree/build_target?file=src%2Fpages%2Findex.astro

Participation

I am willing to submit a pull request for this issue.

I thought the issue could be resolved by specifying the target when running esbuild, so I investigated where esbuild is executed during npm run dev.

As a result, I found that the output of transformWithEsbuild is used at the following location:
Here, 'target: "esnext"' is specified.

astro/packages/astro/src/vite-plugin-astro/compile.ts

Lines 39 to 41 in f13417b

    
           esbuildResult = await transformWithEsbuild(transformResult.code, compileProps.filename, { 
        
           	loader: 'ts', 
        
           	target: 'esnext',

As an experiment, I modified this part to 'target: "es2018"', and found that the decorators were transpiled, and the error no longer occurred during npm run dev.

I would like to create a Pull Request to modify the above location (packages/astro/src/vite-plugin-astro/compile.ts) so that the value of vite.build.target is reflected.
(If there is a preferred method for this fix, please let me know.)

You need to use vite.esbuild.target instead: vitejs/vite#17308 (comment). vite.build.target as its name suggests is for build only.

@bluwy Thank you for your response!

I have also added the vite.esbuild.target setting as shown below.
However, the same error still occurs.
Is there anything else I should check?

// astro.config.mjs
export default defineConfig({
  vite: {
    build: { target: 'es2018' },
    esbuild: { target: 'es2018' }, // added
  }
});

I have also added this to the example.
https://stackblitz.com/github/koyopro/astro-debug/tree/build_target?file=astro.config.mjs

@bluwy As you pointed out, it seems more appropriate to apply vite.esbuild.target rather than vite.build.target, so I have submitted a Pull Request for that. Could you please review it?
fix: Reflect the configuration for esbuild by koyopro · Pull Request #12676 · withastro/astro

	esbuildResult = await transformWithEsbuild(transformResult.code, compileProps.filename, {
	loader: 'ts',
	target: 'esnext',