Failed to compile main process with typescript 4.3 and class private fields

[romansp]

Describe the bug
After upgrading TypeScript to 4.3.x main process bundle no longer builds if there's a class with private field.

To Reproduce
Steps to reproduce the behavior:

1. Clone provided repo
2. Restore dependencies with yarn install
3. Run yarn electron:serve or yarn electron:build

Expected behavior
Main process bundle builds fine.

Actual behavior

 ERROR  Failed to compile with 1 errors                                                                                                                                                                    9:29:09 PM
 error  in ./src/background.ts

Module parse failed: Unexpected token (11:8)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| ]);
| export class Foo {
>     bar = "";
|     getBar() {
|         return this.bar;

 @ multi ./src/background.ts

 ERROR  Build failed with errors.
error Command failed with exit code 1.

Environment (please complete the following information):

• custom config for vcp-electron-builder: N/A
• (if possible) link to your repo: https://github.com/romansp/vue-cli-plugin-electron-builder-typescript-4.3
• terminal output from running vue info:

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD      
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.106
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)      
  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.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @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:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/component-compiler-utils:  3.2.2
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    typescript: 4.3.2 => 4.3.2
    vue: ^2.6.11 => 2.6.14
    vue-cli-plugin-electron-builder: ~2.0.0 => 2.0.0
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.7 (16.2.0)
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.11 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Additional context
There's also same class with private field inside App.vue and both yarn serve/ yarn build complete just fine.

[romansp]

Example repo is a simple project from vue create with:

• Vue 2.x default template
• vue-cli-plugin-electron-builder
• 2 instances of Foo class with private bar field in background.ts and App.vue

What I figured out that helps so far:

• lowering typescript to 4.2.x
• changing tsconfig.json target from esnext to es6

But upgrading to vue-cli 5 beta and so webpack 5 didn't help.

For better clarity here are the differences in TS emit with yarn tsc:

TS 4.3 and target esnext:

export class Foo {
    bar = "";
    getBar() {
        return this.bar;
    }
}

TS 4.3 and target es6:

export class Foo {
    constructor() {
        this.bar = "";
    }
    getBar() {
        return this.bar;
    }
}

TS 4.2 and target esnext:

export class Foo {
    constructor() {
        this.bar = "";
    }
    getBar() {
        return this.bar;
    }
}

Issues I found so far that might be related: TypeStrong/ts-loader#1054 and webpack/webpack#10216

I wonder if that's some upstream issue of webpack, ts-loader, babel or vue-cli-plugin-typescript. What's puzzling is why yarn serve works. Maybe some transpilation is occurring?

[nklayman]

I'm not sure what exactly is causing this error, seems like a bug in typescript/ts-loader. I think it works in the Vue files because vue cli uses ts-loader and babel on those, whereas the main process is just typescript. If you want to use babel on the main process too, use this config:

// vue.config.js
module.exports = {
  lintOnSave: false,
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.module
          .rule('babel')
          .before('ts')
          .use('babel')
          .loader('babel-loader')
          .options({
            presets: [['@babel/preset-env', { modules: false }]],
            plugins: ['@babel/plugin-proposal-class-properties']
          })
      }
    }
  }
}

That fixes the error you get.