Decorator errors since Vite 5.4.9

[dbelob]

Describe the bug

There is an application using InversifyJS (DI container) together with Vite. Inversify heavily depends on decorators. To use decorators, all necessary settings were made and the application worked.

Since version Vite 5.4.9 the application stopped working.

Possible cause of errors is PR #18322

Reproduction

https://stackblitz.com/github/dbelob/vite-inversify-error

Steps to reproduce

Branch main of https://github.com/dbelob/vite-inversify-error repository (StackBlitz link: https://stackblitz.com/github/dbelob/vite-inversify-error) contains example with Vite 5.4.10 (last version) where errors are reproduced:

1. git clone https://github.com/dbelob/vite-inversify-error.git
2. cd vite-inversify-error
3. npm install
4. npm start

The browser will open automatically with errors in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'getMessage')
    at ClassComponent.render (ClassComponent.tsx? [sm]:18:46)
    at finishClassComponent (react-dom.development.js:19781:31)
    ...

Branch vite-5.4.8 of https://github.com/dbelob/vite-inversify-error repository (StackBlitz link: https://stackblitz.com/github/dbelob/vite-inversify-error/tree/vite-5.4.8) contains example with Vite 5.4.8 where errors are not reproduced:

1. git clone -b vite-5.4.8 https://github.com/dbelob/vite-inversify-error.git vite-inversify-error-vite-5.4.8
2. cd vite-inversify-error-vite-5.4.8
3. npm install
4. npm start

The browser will open automatically without errors in the console.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 AMD EPYC 7443 24-Core Processor
    Memory: 6.55 GB / 16.00 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 130.0.6723.70
    Edge: Chromium (128.0.2739.42)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

npm

Logs

Click to expand!

Uncaught TypeError: Cannot read properties of undefined (reading 'getMessage')
    at ClassComponent.render (ClassComponent.tsx? [sm]:18:46)
    at finishClassComponent (react-dom.development.js:19781:31)
    at updateClassComponent (react-dom.development.js:19727:24)
    at beginWork (react-dom.development.js:21650:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27490:7)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopSync (react-dom.development.js:26505:5)

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.

[hi-ogawa]

It looks like inversify requires useDefineForClassFields: false, so it needs to be configured correctly now. Here is an updated repro https://stackblitz.com/edit/github-g9jirc?file=tsconfig.app.json

Previously useDefineForClassFields: true in tsconfig.app.json was ignored, but that's what's fixed in the PR #18322

[dbelob]

It looks like inversify requires useDefineForClassFields: false, so it needs to be configured correctly now. Here is an updated repro https://stackblitz.com/edit/github-g9jirc?file=tsconfig.app.json

Previously useDefineForClassFields: true in tsconfig.app.json was ignored, but that's what's fixed in the PR #18322

@hi-ogawa Thanks a lot!