Backend Integration unable to upgrade since v2.4.4

[rhodee]

Describe the bug

Objects do not have the same structure after v2.4.4. I spent some time reviewing the relevant commit log, and recently tried with the latest version (v2.9.9) and the result is consistent.

Thank you for creating the stackblitz setup - I am able to reproduce the issue here as it appears on my machine.

• <= v.2.4.4 (working setup) - https://stackblitz.com/edit/vitejs-vite-knwzlj
• v2.5.0+ - https://stackblitz.com/edit/vitejs-vite-gy51da

After reviewing the code to see what it does, please open a browser console and click the link. You will see two different logs, which I believe should be identical. Any guidance for backend integration changes to make would be greatly appreciated.

Thank you all for your work on this delightful project.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gy51da

System Info

System:
    OS: macOS 11.6.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 57.79 MB / 16.00 GB
    Shell: 3.4.1 - /usr/local/bin/fish
  Binaries:
    Node: 14.18.1 - ~/.volta/tools/image/node/14.18.1/bin/node
    npm: 7.24.2 - ~/.volta/tools/image/npm/7.24.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.2
    Safari: 15.4
  npmPackages:
    vite: 2.4.4 => 2.4.4

Used Package Manager

npm

Logs

No response

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 https://github.com/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.

[sapphi-red]

This change (#4279) is affecting it.
Set useDefineForClassFields in tsconfig.json to false to get the previous behavior.

Or change HelloController to

class HelloController extends Controller {
  static targets = ['header'];

  // headerTarget!: HTMLElement;
  declare headerTarget: HTMLElement;

  handleClick(evt: MouseEvent) {
    evt.preventDefault();
    console.log('clicked', this.headerTarget);
  }
}

[rhodee]

@sapphi-red thank you for reviewing this. I will update the tsconfig.json. What potential impacts would setting this value to false have as it relates to the usage of Vite for future releases as you understand it today?

[sapphi-red]

From typescript 4.3.2, the default value of useDefineForClassFields is true and some libraries may expect true.
https://vitejs.dev/guide/features.html#typescript-compiler-options