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.