Execution of vite build fails on typescript decorators #17308

dkent600 · 2024-05-24T22:03:21Z

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:

clone https://github.com/dkent600/douglaskent/tree/decorators-issue
run npm install
run npm debug or npx vite
browse to http://localhost:9000/
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.

The text was updated successfully, but these errors were encountered:

bluwy · 2024-05-27T06:40:43Z

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 · 2024-05-27T21:27:53Z

@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 · 2024-05-27T22:07:22Z

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 · 2024-05-27T22:40:38Z

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 · 2024-05-27T23:33:51Z

I assume this has to wait for #16616.

ah1508 · 2024-05-28T00:58:55Z

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 · 2024-05-28T05:58:01Z

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 · 2024-05-28T14:31:04Z

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

3cp · 2024-05-28T22:46:47Z

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 · 2024-05-29T00:28:25Z

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 · 2024-05-29T07:07:39Z

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 · 2024-05-29T13:17:59Z

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!

3cp · 2024-05-29T23:47:46Z

I confirmed the repo works with esbuild.target: "es2022", plus esbuild 0.21.3 override in package.json. Needs both.

dkent600 · 2024-05-31T15:35:56Z

I confirmed the repo works with esbuild.target: "es2022", plus esbuild 0.21.3 override in package.json. Needs both.

You mean optimizeDeps.esbuildOptions.target: "es2022", yes?

That is exactly what the repository that I supplied to this issue is and has been using all along, and following the repo steps, it doesn't work, the browser continues to fail on decorators. It seems @3cp that you are doing something different or are not following the repo steps. How can we figure this out? Or should we just wait until the apparent vite fix is released?

ah1508 · 2024-05-31T20:11:22Z

No, something like that:

/** @type {import('vite').UserConfig} */
export default {
    esbuild: {
        target: "es2022"
    },
    plugins: [/*your plugins*/]
}

3cp · 2024-05-31T21:54:53Z

The above config was what worked.
The vite fix was also release. I am working on an vite skeleton for au2, you can try it now from the branch (not merged yet).

npx makes aurelia/new#vite

Got some issue with css-module and vitest combination. If you don't use css-module, it should work smoothly.

dkent600 · 2024-06-01T12:57:16Z

esbuild: {
        target: "es2022"
    },

Yes @ah1508 ! I have confirmed that works, thanks! It looks like I have had some confusion interpreting the messages about what specifically was being called-for for the configuration.

dkent600 · 2024-06-01T13:05:30Z

The vite fix was also release

@3cp The most recent vite release had no effect on the problem. Finally only the specific "es2022" config change had any effect.

dkent600 · 2024-06-01T13:06:55Z

The vite fix was also release. I am working on an vite skeleton for au2, you can try it now from the branch (not merged yet).

@3cp Sorry, which branch, of what?

3cp · 2024-06-02T02:47:54Z

The target config is required for esbuild. The vite fix was upgrading to latest esbuild version, means you don't need override esbuild in package.json.

dkent600 added the pending triage label May 24, 2024

dkent600 mentioned this issue May 24, 2024

bindable decorator should not be giving a runtime error aurelia/aurelia#1980

Closed

dkent600 changed the title ~~Compile fails on typescript decorators~~ Execution of vite build fails on typescript decorators May 27, 2024

bluwy linked a pull request May 29, 2024 that will close this issue

chore(deps): update esbuild #17290

Merged

bluwy closed this as completed in #17290 May 29, 2024

bluwy mentioned this issue Jun 12, 2024

Wrong esbuild target when using vite dev #13756

Open

7 tasks

github-actions bot locked and limited conversation to collaborators Jun 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Execution of vite build fails on typescript decorators #17308

Execution of vite build fails on typescript decorators #17308

dkent600 commented May 24, 2024 •

edited

bluwy commented May 27, 2024

dkent600 commented May 27, 2024

3cp commented May 27, 2024 •

edited

ah1508 commented May 27, 2024 •

edited

3cp commented May 27, 2024

ah1508 commented May 28, 2024 •

edited

bluwy commented May 28, 2024

ah1508 commented May 28, 2024

3cp commented May 28, 2024

dkent600 commented May 29, 2024

bluwy commented May 29, 2024

dkent600 commented May 29, 2024

3cp commented May 29, 2024

dkent600 commented May 31, 2024 •

edited

ah1508 commented May 31, 2024 •

edited

3cp commented May 31, 2024

dkent600 commented Jun 1, 2024 •

edited

dkent600 commented Jun 1, 2024

dkent600 commented Jun 1, 2024 •

edited

3cp commented Jun 2, 2024

Execution of vite build fails on typescript decorators #17308

Execution of vite build fails on typescript decorators #17308

Comments

dkent600 commented May 24, 2024 • edited

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

bluwy commented May 27, 2024

dkent600 commented May 27, 2024

3cp commented May 27, 2024 • edited

ah1508 commented May 27, 2024 • edited

3cp commented May 27, 2024

ah1508 commented May 28, 2024 • edited

bluwy commented May 28, 2024

ah1508 commented May 28, 2024

3cp commented May 28, 2024

dkent600 commented May 29, 2024

bluwy commented May 29, 2024

dkent600 commented May 29, 2024

3cp commented May 29, 2024

dkent600 commented May 31, 2024 • edited

ah1508 commented May 31, 2024 • edited

3cp commented May 31, 2024

dkent600 commented Jun 1, 2024 • edited

dkent600 commented Jun 1, 2024

dkent600 commented Jun 1, 2024 • edited

3cp commented Jun 2, 2024

dkent600 commented May 24, 2024 •

edited

3cp commented May 27, 2024 •

edited

ah1508 commented May 27, 2024 •

edited

ah1508 commented May 28, 2024 •

edited

dkent600 commented May 31, 2024 •

edited

ah1508 commented May 31, 2024 •

edited

dkent600 commented Jun 1, 2024 •

edited

dkent600 commented Jun 1, 2024 •

edited