TS Decorators don't work when using Vite 5.0.11 & TS 5.3.3

[vibbix]

Describe the bug

When trying out the typescript-json-serializer project, I noticed that the latest versions of Vite doesn't read the contents of tsconfig.json when specified in vite.config.ts

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      tsconfig: './tsconfig.json'
    }
  },
})

Leading to (n chrome):

3:09:30 PM [vite] Pre-transform error: Transform failed with 4 errors:
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:9:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:10:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:11:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:13:8: ERROR: Parameter decorators only work when experimental decorators are enabled
3:09:30 PM [vite] Pre-transform error: Transform failed with 1 error:
/Users/mbeznos/git/ts-json-serialize-test/src/models/employee.ts:22:8: ERROR: Parameter decorators only work when experimental decorators are enabled
3:09:30 PM [vite] Pre-transform error: Transform failed with 1 error:
/Users/mbeznos/git/ts-json-serialize-test/src/models/panther.ts:8:42: ERROR: Parameter decorators only work when experimental decorators are enabled

In both tsconfig.json and tsconfig.node.json this is specified:

    "compilerOptions": {
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
    }

When i specify this in the vite.config.ts, I get an error that TS2769: No overload matches this call.

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true,
          emitDecoratorMetadata: true,
        }
      }
    }
  },
})

With this error, nothing appears in the Vite error log and i see this in my console display on Firefox:

Uncaught TypeError: can't access property "name", v2 is undefined
    deserializeProperty index.esm.js:1
    deserializeObject index.esm.js:1
    deserializeObject index.esm.js:1
    v index.esm.js:1
    deserializeObjectArray index.esm.js:1
    <anonymous> ParsedData.ts:10
index.esm.js:1:7348
    deserializeProperty index.esm.js:1
    deserializeObject index.esm.js:1
    forEach self-hosted:203
    deserializeObject index.esm.js:1
    v index.esm.js:1
    reduce self-hosted:263
    deserializeObjectArray index.esm.js:1
    <anonymous> ParsedData.ts:10

On Chrome, i get this error:
Uncaught SyntaxError: Invalid or unexpected token (at organization.ts:5:1)
and the same error in chrome as before with output to the Vite console. I am unsure why Firefox doesn't log the error while chrome does, and why the decorator experimental behavior isn't registered in the config.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mecubs?file=tsconfig.json

Steps to reproduce

run vite dev and launch in browser

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 50.30 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.5.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.14.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.199
    Safari: 17.2.1
    Firefox Developer Edition: v122.0b7

Used Package Manager

pnpm

Logs

3:01:40 PM [vite] Pre-transform error: Transform failed with 4 errors:
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:9:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:10:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:11:8: ERROR: Parameter decorators only work when experimental decorators are enabled
/Users/mbeznos/git/ts-json-serialize-test/src/models/human.ts:13:8: ERROR: Parameter decorators only work when experimental decorators are enabled
3:01:40 PM [vite] Pre-transform error: Transform failed with 1 error:
/Users/mbeznos/git/ts-json-serialize-test/src/models/employee.ts:22:8: ERROR: Parameter decorators only work when experimental decorators are enabled
3:01:40 PM [vite] Pre-transform error: Transform failed with 1 error:
/Users/mbeznos/git/ts-json-serialize-test/src/models/panther.ts:8:42: ERROR: Parameter decorators only work when experimental decorators are enabled

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-mecubs (Open reproduction)

[ae-meddeb]

you have 2 nested compilerOptions definition in your tsconfig

[hi-ogawa]

This is likely an issue with ts decorator metadata, which is used by typescript-json-serializer GillianPerard/typescript-json-serializer#190. Vite uses esbuild internally but it's known to not support this feature evanw/esbuild#257 (comment), so this issue is probably a duplicate of #4884 (comment).

The workaround is to use a different transpiler, but the official vite-plugin-react-swc doesn't seem to have a plan to support this either vitejs/vite-plugin-react-swc#67.

(Probably not recommended but you might be able to run tsc for transpilation. Just out of curiosity, I tested this plugin https://github.com/herberttn/vite-plugin-typescript-transform/ and it seems to work but I cannot guarantee anything https://github.com/hi-ogawa/repro-vite-ts-decorator-metadata (or stackblitz))

[hi-ogawa]

I'll close this as a duplicate of #4884 (comment) and "not planned".

I'll put one more pointer here vitest-dev/vitest#708 where some people used swc to support decorator metadata for nestjs testing on Vitest. I hope it also gives some background of the issue and potential workaround.