Execution of vite build fails on typescript decorators

[dkent600]

Describe the bug

After transpiling using the vite command, then running the website hosted by vite (http://localhost:9000), the browser should not fail with this error in the console:

Uncaught SyntaxError SyntaxError: Invalid or unexpected token
at (program) (c:[...]\src\pages\resume\resume.ts:18:1)

The line of code is a decorator in resume.ts.

I expect the transpiled code to understand what to do with decorators.

Note that the tsconfig.js compilerOption section does not include:

    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

but those should not be necessary given the decorator implementation (Aurelia) I am using, and the versions:

"esbuild": "^0.21.3",
"typescript": "5.4.5",

If one adds in those two tsconfig compilerOption lines, then the vite problem disappears but then a different browser error ensues because the esbuild and typescript revisions require those options to be removed or set to false in order for decorators to work.

So I wonder whether vite has fallen behind these new revisions regarding decorators, or if there is something I need to do to get vite to work in this scenario? Is vite usually expected to work in this scenario?

Reproduction

https://github.com/dkent600/douglaskent/tree/decorators-issue

Steps to reproduce

Steps:

1. clone https://github.com/dkent600/douglaskent/tree/decorators-issue
2. run npm install
3. run npm debug or npx vite
4. browse to http://localhost:9000/
5. see the error message in the console.log

"esbuild": "^0.21.3",
"typescript": "5.4.5",
"vite": "5.2.11",

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 15.24 GB / 31.68 GB
  Binaries:
    Node: 20.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vite: 5.2.11 => 5.2.11

Used Package Manager

npm

Logs

Click to expand!

$ npx vite --debug vite:config bundled config file loaded in 728.76ms +0ms vite:config using resolved config: { vite:config server: { vite:config preTransformRequests: true, vite:config port: 9000, vite:config strictPort: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1], vite:config middlewareMode: false, vite:config fs: { vite:config strict: true, vite:config allow: [Array], vite:config deny: [Array], vite:config cachedChecks: undefined vite:config } vite:config }, vite:config build: { vite:config target: 'es2022', vite:config cssTarget: 'es2022', vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { plugins: [Array] }, vite:config minify: 'terser', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { vite:config include: [Array], vite:config extensions: [Array], vite:config transformMixedEsModules: true vite:config }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config plugins: [ vite:config 'vite:optimized-deps', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'au2', vite:config 'sass-glob-import', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'aurelia:dev-alias', vite:config 'raw', vite:config 'visualizer', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:client-inject', vite:config 'vite:css-analysis', vite:config 'vite:import-analysis' vite:config ], vite:config define: { vite:config 'process.env': { vite:config ALLUSERSPROFILE: 'C:\\ProgramData', vite:config APPDATA: 'C:\\Users\\dkent\\AppData\\Roaming', vite:config CHROME_CRASHPAD_PIPE_NAME: '\\\\.\\pipe\\crashpad_12084_MBWYNBPZXEFMYLCW', vite:config COLOR: '1', vite:config COLORTERM: 'truecolor', vite:config CommonProgramFiles: 'C:\\Program Files\\Common Files', vite:config 'CommonProgramFiles(x86)': 'C:\\Program Files (x86)\\Common Files', vite:config CommonProgramW6432: 'C:\\Program Files\\Common Files', vite:config COMPUTERNAME: 'PATRICIA', vite:config ComSpec: 'C:\\WINDOWS\\system32\\cmd.exe', vite:config DEBUG: 'vite:*', vite:config DriverData: 'C:\\Windows\\System32\\Drivers\\DriverData', vite:config EDITOR: 'C:\\WINDOWS\\notepad.exe', vite:config EFC_10792: '1', vite:config FPS_BROWSER_APP_PROFILE_STRING: 'Internet Explorer', vite:config FPS_BROWSER_USER_PROFILE_STRING: 'Default', vite:config GIT_ASKPASS: 'c:\\Users\\dkent\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh', vite:config HOME: 'C:\\Users\\dkent', vite:config HOMEDRIVE: 'C:', vite:config HOMEPATH: '\\Users\\dkent', vite:config IGCCSVC_DB: 'AQAAANCMnd8BFdERjHoAwE/Cl+sBAAAA6VSUXuZ5jEu8aMRy3IoifQQAAAACAAAAAAAQZgAAAAEAACAAAAANAClIoaC9Ke90bBHD4hGMxFIFLW6K/is+JxdCWc4jAwAAAAAOgAAAAAIAACAAAABrcxv/8a1QNRHZM6ryyvW3Z2q1e7tOztg672KxZBOrDmAAAABwmIFcbImsQeyjMLIXx9crgmzWy4x9ncGsiofazx/Ee6CsO/J+h9y2MG/OioMvbk3dxwi48djoldnN3Cy7DmgzRhHwIhM6AK/J0ZG5j16aUWmOkmJpXw1AmI8Jsq66Ky9AAAAAqTBYOXIB/3D6c0s9ZMnpkfI8lnLFeyQdUzQtVKE7yPlWfBng2/lacGdNp/yA3ALZD2cYKsqn54VuvkIyhLjm5A==', vite:config INIT_CWD: 'C:\\Users\\dkent\\Documents\\Projects\\douglaskent', vite:config LANG: 'en_US.UTF-8', vite:config LOCALAPPDATA: 'C:\\Users\\dkent\\AppData\\Local', vite:config LOGONSERVER: '\\\\PATRICIA', vite:config NODE: 'C:\\Program Files\\nodejs\\node.exe', vite:config NODE_ENV: 'development', vite:config NODE_EXE: 'C:\\Program Files\\nodejs\\\\node.exe', vite:config NPM_CLI_JS: 'C:\\Program Files\\nodejs\\\\node_modules\\npm\\bin\\npm-cli.js', vite:config npm_command: 'exec', vite:config npm_config_auto_install_peers: 'true', vite:config npm_config_cache: 'C:\\Users\\dkent\\AppData\\Local\\npm-cache', vite:config npm_config_globalconfig: 'C:\\Program Files\\nodejs\\etc\\npmrc', vite:config npm_config_global_prefix: 'C:\\Program Files\\nodejs', vite:config npm_config_init_module: 'C:\\Users\\dkent\\.npm-init.js', vite:config npm_config_local_prefix: 'C:\\Users\\dkent\\Documents\\Projects\\douglaskent', vite:config npm_config_msvs_version: '', vite:config npm_config_node_gyp: 'C:\\Users\\dkent\\AppData\\Roaming\\nvm\\v20.12.1\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js', vite:config npm_config_noproxy: '', vite:config npm_config_npm_version: '10.5.0', vite:config npm_config_prefix: 'C:\\Program Files\\nodejs', vite:config npm_config_shamefully_hoist: 'true', vite:config npm_config_unsafe_perm: 'true', vite:config npm_config_userconfig: 'C:\\Users\\dkent\\.npmrc', vite:config npm_config_user_agent: 'npm/10.5.0 node/v20.12.1 win32 x64 workspaces/false', vite:config npm_execpath: 'C:\\Users\\dkent\\AppData\\Roaming\\nvm\\v20.12.1\\node_modules\\npm\\bin\\npm-cli.js', vite:config npm_lifecycle_event: 'npx', vite:config npm_lifecycle_script: 'vite', vite:config npm_node_execpath: 'C:\\Program Files\\nodejs\\node.exe', vite:config npm_package_json: 'C:\\Users\\dkent\\Documents\\Projects\\douglaskent\\package.json', vite:config npm_package_version: '1.2', vite:config NPM_PREFIX_NPX_CLI_JS: 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npx-cli.js', vite:config NPX_CLI_JS: 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npx-cli.js', vite:config NUMBER_OF_PROCESSORS: '20', vite:config NVM_HOME: 'C:\\Users\\dkent\\AppData\\Roaming\\nvm', vite:config NVM_SYMLINK: 'C:\\Program Files\\nodejs', vite:config OneDrive: 'C:\\Users\\dkent\\OneDrive', vite:config OneDriveConsumer: 'C:\\Users\\dkent\\OneDrive', vite:config ORIGINAL_XDG_CURRENT_DESKTOP: 'undefined', vite:config OS: 'Windows_NT', vite:config Path: 'C:\\Users\\dkent\\Documents\\Projects\\douglaskent\\node_modules\\.bin;C:\\Users\\dkent\\Documents\\Projects\\douglaskent\\node_modules\\.bin;C:\\Users\\dkent\\Documents\\Projects\\node_modules\\.bin;C:\\Users\\dkent\\Documents\\node_modules\\.bin;C:\\Users\\dkent\\node_modules\\.bin;C:\\Users\\node_modules\\.bin;C:\\node_modules\\.bin;C:\\Users\\dkent\\AppData\\Roaming\\nvm\\v20.12.1\\node_modules\\npm\\node_modules\\@npmcli\\run-script\\lib\\node-gyp-bin;C:\\Program Files\\WindowsApps\\Microsoft.PowerShell_7.4.2.0_x64__8wekyb3d8bbwe;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\Program Files (x86)\\NVIDIA Corporation\\PhysX\\Common;C:\\Program Files\\NVIDIA Corporation\\NVIDIA NvDLISR;C:\\Program Files\\dotnet\\;C:\\Program Files\\Git\\cmd;C:\\Users\\dkent\\AppData\\Roaming\\nvm;C:\\Program Files\\nodejs;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\WINDOWS\\System32\\OpenSSH\\;C:\\Program Files\\Cloudflare\\Cloudflare WARP\\;C:\\Program Files\\Docker\\Docker\\resources\\bin;C:\\Users\\dkent\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\dkent\\AppData\\Local\\Programs\\Microsoft VS Code\\bin;C:\\Users\\dkent\\AppData\\Local\\gitkraken\\bin;C:\\Users\\dkent\\AppData\\Roaming\\nvm;C:\\Program Files\\nodejs;C:\\Users\\dkent\\AppData\\Local\\Microsoft\\WindowsApps;', vite:config PATHEXT: '.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC;.CPL', vite:config PROCESSOR_ARCHITECTURE: 'AMD64', vite:config PROCESSOR_IDENTIFIER: 'Intel64 Family 6 Model 154 Stepping 3, GenuineIntel', vite:config PROCESSOR_LEVEL: '6', vite:config PROCESSOR_REVISION: '9a03', vite:config ProgramData: 'C:\\ProgramData', vite:config ProgramFiles: 'C:\\Program Files', vite:config 'ProgramFiles(x86)': 'C:\\Program Files (x86)', vite:config ProgramW6432: 'C:\\Program Files', vite:config PROMPT: '$P$G', vite:config PSModulePath: 'C:\\Users\\dkent\\OneDrive\\Documents\\PowerShell\\Modules;C:\\Program Files\\PowerShell\\Modules;c:\\program files\\windowsapps\\microsoft.powershell_7.4.2.0_x64__8wekyb3d8bbwe\\Modules;C:\\Program Files\\WindowsPowerShell\\Modules;C:\\WINDOWS\\system32\\WindowsPowerShell\\v1.0\\Modules', vite:config PUBLIC: 'C:\\Users\\Public', vite:config SESSIONNAME: 'Console', vite:config SystemDrive: 'C:', vite:config SystemRoot: 'C:\\WINDOWS', vite:config TEMP: 'C:\\Users\\dkent\\AppData\\Local\\Temp', vite:config TERM_PROGRAM: 'vscode', vite:config TERM_PROGRAM_VERSION: '1.89.1', vite:config TMP: 'C:\\Users\\dkent\\AppData\\Local\\Temp', vite:config USERDOMAIN: 'PATRICIA', vite:config USERDOMAIN_ROAMINGPROFILE: 'PATRICIA', vite:config USERNAME: 'dkent', vite:config USERPROFILE: 'C:\\Users\\dkent', vite:config VSCODE_GIT_ASKPASS_EXTRA_ARGS: '', vite:config VSCODE_GIT_ASKPASS_MAIN: 'c:\\Users\\dkent\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js', vite:config VSCODE_GIT_ASKPASS_NODE: 'C:\\Users\\dkent\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe', vite:config VSCODE_GIT_IPC_HANDLE: '\\\\.\\pipe\\vscode-git-08740befd1-sock', vite:config VSCODE_INJECTION: '1', vite:config windir: 'C:\\WINDOWS', vite:config ZES_ENABLE_SYSMAN: '1' vite:config } vite:config }, vite:config resolve: { vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], vite:config conditions: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object], [Object] ] vite:config }, vite:config optimizeDeps: { vite:config holdUntilCrawlEnd: true, vite:config esbuildOptions: { vite:config preserveSymlinks: false, vite:config target: 'es2022', vite:config define: [Object], vite:config plugins: [Array] vite:config } vite:config }, vite:config configFile: 'C:/Users/dkent/Documents/Projects/douglaskent/vite.config.ts', vite:config configFileDependencies: [ 'C:/Users/dkent/Documents/Projects/douglaskent/vite.config.ts' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config optimizeDeps: { force: undefined }, vite:config server: { host: undefined } vite:config }, vite:config root: 'C:/Users/dkent/Documents/Projects/douglaskent', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: 'C:/Users/dkent/Documents/Projects/douglaskent/public', vite:config cacheDir: 'C:/Users/dkent/Documents/Projects/douglaskent/node_modules/.vite', vite:config command: 'serve', vite:config mode: 'development', vite:config ssr: { vite:config target: 'node', vite:config optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] } vite:config }, vite:config isWorker: false, vite:config mainConfig: null, vite:config bundleChain: [], vite:config isProduction: false, vite:config css: { lightningcss: undefined }, vite:config esbuild: { jsxDev: true }, vite:config preview: { vite:config port: undefined, vite:config strictPort: true, vite:config host: undefined, vite:config https: undefined, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: undefined, vite:config headers: undefined vite:config }, vite:config envDir: 'C:/Users/dkent/Documents/Projects/douglaskent', vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(1) { vite:config 'fnpd_C:/Users/dkent/Documents/Projects/douglaskent' => { vite:config dir: 'C:/Users/dkent/Documents/Projects/douglaskent', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +30ms vite:deps Hash is consistent. Skipping. Use --force to override. +0ms VITE v5.2.11 ready in 1073 ms ➜ Local: http://localhost:9000/ ➜ Network: use --host to expose ➜ press h + enter to show help

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.

[bluwy]

Are you getting the error from your browser, or your nodejs terminal? Vite doesn't down-level your code by default, so while it can parse the decorators, the output still keep it intact and send it to your browser, and your browser may not be able to parse decorators. When experimentalDecorators: true is set, esbuild will then down-level it because of different decorator semantics.

If you want to down-level the decorators to something else, you can configure esbuild.target: "es2022" or configure esbuild.supported.decorators: false.

[dkent600]

@bluwy Thanks for your response!

To answer your questions:

You made me realize I misrepresented the case. Rather than the error being issued from the compiler, it is issuing from the browser and one sees the error in the console.log. I have modified the issue description accordingly. Apologies.

Can you please confirm exactly what vite should be doing, given the scenario of this issue which is using the latest updates wrt to decorators:

in tsconfig.json and in vite.config:

    "module": "es2022",
    "target": "es2022",

esbuild is everywhere set to 0.21.3 (the latest)
typescript is set to 5.4.5 (the latest)

My understanding is that both emitDecoratorMetadata and experimentalDecorators should be false in this scenario and the decorators I am using (from Aurelia) are expecting this scenario.

Thanks!

[3cp]

Looks like esbuild and typescript differed.

I thought vite uses tsc on .ts files, apparently I was wrong. It looks like it's the esbuild for that work.

With tsc, experimentalDecorators is only needed for legacy decorator, tsc automatically deals with latest decorator. While esbuild requires experimentalDecorators to be set regardless.

Since decorator has not been natively implemented in browsers, I am not sure why esbuild doesn't touch it by default.

Update: my guess is that esbuild doesn't do cross-file type check, it doesn't know whether a decorator usage is for legacy spec or latest spec. While tsc has the type information available, it knows that spec the decorator usage is following.

[ah1508]

dkent600 and I use the same framework (Aurelia) and I think it is important to mention that decorators on classes are properly handled. It results in a property that gives the information written in the decorator. For instance, @inject(Bar, Baz) annotation on a class named Foo results in:

Reflect.defineProperty(Foo, "inject", { value: [Bar, Baz], writable: true, configurable: true, enumerable: true });

with or without "experimentalDecorators": true

The problem occurs when decorator is on a method or on a field. Without experimentalDecorators the decorator is in the js file and the browser complains (since he @ is an illegal character). With experimentalDecorators=true the decorator is transform in js code that fails (framework error). More details about this transformation:

ts source file of class Foo:

s = "";
@watch("s")
onchange(newValue: any){
    console.log("hello")
}

js code:

__decorateClass([
  watch("s")
], Foo.prototype, "onchange", 1);

[3cp]

I assume this has to wait for #16616.

[ah1508]

I forgot to mention that overriding the esbuild version :

"overrides": {
    "vite": {
      "esbuild": "0.21.4"
    }
  }

and/or settings "target": "ES2022" (or esnext) in tsconfig.json does not solve the problem.

[bluwy]

Can you please confirm exactly what vite should be doing, given the scenario of this issue which is using the latest updates wrt to decorators:

@dkent600 esbuild has two ways to set the transform target: its target top-level option, and tsconfigRaw.compilerOptions.target option (from tsconfig.json). The former Vite sets as esnext and esbuild will prioritize that over tsconfigRaw. This is documented at https://vitejs.dev/guide/features.html#target. experimentalDecorators is not needed.

As mentioned, you need to set this to work:

If you want to down-level the decorators to something else, you can configure esbuild.target: "es2022" or configure esbuild.supported.decorators: false.

However, I noticed that this also requires esbuild v0.21 to work so esbuild can compile it. As mentioned by others, you can use overrides to change the version that Vite uses. The upgrade is tracked at #16616

[ah1508]

Indeed, setting target (es2020 for instance) in vite.config.json solves the problem.

[3cp]

Indeed, setting target (es2020 for instance) in vite.config.json solves the problem.

Cheers! To be clear, the solution is the target setting in vite config, plus esbuild 0.21 override?

[dkent600]

Indeed, setting target (es2020 for instance) in vite.config.json solves the problem.

@ah1508 The code that I submitted to this issue demonstrating the problem is already using esbuild.target: "es2022" in vite.config and "overrides": { "esbuild": "^0.21.3" } in package.json.

These do not solve the problem, they demonstrate it. Maybe I am misunderstanding something?

[bluwy]

The code that I submitted to this issue demonstrating the problem is already using esbuild.target: "es2022" in vite.config and "overrides": { "esbuild": "^0.21.3" } in package.json.

It doesn't seem so? It's setting optimizeDeps.esbuildOptions.target: "es2022", not esbuild.target: "es2022"

[dkent600]

It doesn't seem so? It's setting optimizeDeps.esbuildOptions.target: "es2022", not esbuild.target: "es2022"

I misspoke, the setting I am using is indeed optimizeDeps: { esbuildOptions: { target: 'es2022' } }. And it isn't working. It should be possible to confirm using the repro steps in this issue. Thanks!