Support javascript decorators

[mantou132]

Description

Support javascript decorators

Suggested solution

Update esbuild to v0.21

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[mantou132]

~how support javascript decorators for production build~

esbuild target: es2022

[jindong-zhannng]

Is there a work around at current stage except for waiting for the next version of vite?

[CollinHerber]

The frontend framework I use is now using Javascript decorators and I cannot update to the latest version because of this. Hoping to see the update in ESBuild to support this soon! <3

[bluwy]

If you want to upgrade esbuild now for your project, you can use overrides. This would be updated in the next minor.

[firelizzard18]

FYI this does not work with an ESNext or ES2022 target. Setting the target to ES2020 does work, but a newer target fails:

error during build:
RollupError: Unexpected token `@`. Expected identifier, string literal, numeric literal or [ for the computed key
    at getRollupError (file:///path/to/project/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at ParseError.initialise (file:///path/to/project/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
    at convertNode (file:///path/to/project/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
    at convertProgram (file:///path/to/project/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
    at Module.setSource (file:///path/to/project/node_modules/rollup/dist/es/shared/node-entry.js:14246:24)
    at async ModuleLoader.addModuleSource (file:///path/to/project/node_modules/rollup/dist/es/shared/node-entry.js:18892:13)

It's also worth noting that you need to update the babel config if you want vite to work:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { version: '2023-11' }],
        ],
      },
    }),
  ],
})

[aleclarson]

Note that #17290 is not enough to get "JS decorator" support.

You also need to set esbuild: { target: 'es2022' } in your Vite config.