Class properties not supported with TypeScript

[RichardDorian]

Describe the bug Class propertiesm, when used in the main process are causing a crash because babel doesn't know how to transpile this. There's an official babel plugin for this but I don't know how to apply it to ts-loader

To Reproduce Create a class with class properties and use this class in the main process.

Something like this should do it

class Test {
  public static readonly FOO = 'bar';
}

const test = new Test();

Expected behavior Should transpile this

Environment (please complete the following information):

vue info

``` Environment Info: System: OS: Windows 10 10.0.22000 CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor Binaries: Node: 16.17.0 - D:\Programs\NodeJS\node.EXE Yarn: Not Found npm: 8.15.0 - D:\Programs\NodeJS\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.33) npmPackages: @vue/babel-helper-vue-jsx-merge-props: 1.2.1 @vue/babel-helper-vue-transform-on: 1.0.2 @vue/babel-plugin-jsx: 1.1.1 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 5.0.4 @vue/babel-preset-jsx: 1.2.4 @vue/babel-sugar-composition-api-inject-h: 1.2.1 @vue/babel-sugar-composition-api-render-instance: 1.2.4 @vue/babel-sugar-functional-vue: 1.2.2 @vue/babel-sugar-inject-h: 1.2.2 @vue/babel-sugar-v-model: 1.2.3 @vue/babel-sugar-v-on: 1.2.3 @vue/cli-overlay: 5.0.4 @vue/cli-plugin-babel: ~5.0.0 => 5.0.4 @vue/cli-plugin-router: 5.0.4 @vue/cli-plugin-typescript: ~5.0.0 => 5.0.4 @vue/cli-plugin-vuex: ~5.0.0 => 5.0.4 @vue/cli-service: ~5.0.0 => 5.0.4 @vue/cli-shared-utils: 5.0.4 (4.5.17) @vue/compiler-core: 3.2.36 @vue/compiler-dom: 3.2.36 @vue/compiler-sfc: 3.2.36 @vue/compiler-ssr: 3.2.36 @vue/component-compiler-utils: 3.3.0 @vue/devtools-api: 6.1.4 @vue/reactivity: 3.2.36 @vue/reactivity-transform: 3.2.36 @vue/runtime-core: 3.2.36 @vue/runtime-dom: 3.2.36 @vue/server-renderer: 3.2.36 @vue/shared: 3.2.36 @vue/web-component-wrapper: 1.3.0 typescript: ~4.5.5 => 4.5.5 vue: ^3.2.13 => 3.2.36 vue-class-component: ^8.0.0-0 => 8.0.0-rc.1 vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1 vue-hot-reload-api: 2.3.4 vue-loader: 17.0.0 (15.9.8) vue-style-loader: 4.1.3 vue-template-es2015-compiler: 1.9.1 vuex: ^4.0.0 => 4.0.2 npmGlobalPackages: @vue/cli: Not Found ``` I am using `nvm` that's why it says @vue/cli isn't installed as global but it is.

Additional context If you know how I can add the babel plugin please tell me, I don't even know if the babel plugin works with ts-loader. It would be cool to already have this since those class properties are very used when using TypeScript.

[MatthijsBurgh]

I don't have the knowledge either.

For other people, please include more information.

• The error log
• What plugins/loaders/configs are you using.
• Provide a small test project
• etc.

[RichardDorian]

This is reproducible with the VueJS 3 TypeScript preset initialized with @vue/cli and running vue add electron-builder. Anything more to do unless of course writing the code that breaks ts-loader

[MatthijsBurgh]

Only V3-alpha use Vue3. As this is an alpha and the main maintainer and I do not have that much time. I can't help you for now.

[MatthijsBurgh]

This is reproducible with the VueJS 3 TypeScript preset initialized with @vue/cli and running vue add electron-builder. Anything more to do unless of course writing the code that breaks ts-loader

I would be really easy for other people to help you, when you create a small example project instead of demanding that from the people that want to help you.

[RichardDorian]

Here is the project: class-properties.zip

I also needed to manually update ts-loader because otherwise it doesn't compile at all. I updated it to ts-loader@^8.4.0

And here is the error:

[MatthijsBurgh]

Probably similar, not the same, solution required as https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1924

[travislaynewilson]

This is really hurting me as well.

[DMiradakis]

Yep having serious pain points with this right now, actually.