Main process fail on class & require() of ES Module

[NoFrosty]

Describe the bug
Can't build main process with class.

To Reproduce
Create a ts file with a class in it.
import the class in background.ts

abstract class MainServiceBase {
  private _notificationManager: NotificationManager;
  private _logger: Logger;

Error
I'm getting this error :

Module parse failed: Unexpected token (2:24)
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.
| class MainServiceBase {
>     _notificationManager;
|     _logger;
|     constructor(notificationManager, logger) {

 @ ./src/services/DownloadManager.ts 1:0-48 10:30-45
 @ ./src/background.ts
 @ multi ./src/background.ts

Tried to fix
I tried to set my vue.config.js just like in #204

And now I'm getting this error :

App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Calvi\Documents\GitHub\launcherv3\node_modules\got\dist\source\index.js from C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js not supported.
Instead change the require of C:\Users\Calvi\Documents\GitHub\launcherv3\node_modules\got\dist\source\index.js in C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js to a dynamic import() which is available in all CommonJS modules.
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at eval (webpack:///external_%22require(\%22got\%22)%22?:1:18)
    at Object.got (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:7148:1)
    at __webpack_require__ (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:20:30)
    at eval (webpack:///./src/services/DownloadManager.ts?:25:62)
    at Module../src/services/DownloadManager.ts (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:6991:1)
    at __webpack_require__ (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:20:30)
    at eval (webpack:///./src/background.ts?:22:84)
    at Module../src/background.ts (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:6979:1)
    at __webpack_require__ (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:20:30)
    at eval (webpack:///multi_./src/background.ts?:1:18)
    at Object.0 (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:7038:1)
    at __webpack_require__ (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:20:30)
    at C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:84:18
    at Object.<anonymous> (C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\index.js:87:10)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at loadApplicationPackage (C:\Users\Calvi\Documents\GitHub\launcherv3\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
    at Object.<anonymous> (C:\Users\Calvi\Documents\GitHub\launcherv3\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Object.<anonymous> (node:electron/js2c/browser_init:193:3197)
    at Object../lib/browser/init.ts (node:electron/js2c/browser_init:193:3401)
    at __webpack_require__ (node:electron/js2c/browser_init:1:128)
    at node:electron/js2c/browser_init:1:1200
    at node:electron/js2c/browser_init:1:1267
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
(node:24488) [DEP0128] DeprecationWarning: Invalid 'main' field in 'C:\Users\Calvi\Documents\GitHub\launcherv3\dist_electron\package.json' of 'background.ts'. Please either fix that or report it to the module author

Expected behavior
Main process build without error.

Additional context
My tsconfig.json :

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "useUnknownInCatchVariables": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "noImplicitAny": false,
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

And my vue.config.js :

module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.module
          .rule("babel")
          .test(/\.ts$/)
          .exclude.add(/node_modules/)
          .end()
          .use("babel")
          .loader("babel-loader")
          .options({
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    esmodules: true,
                  },
                },
              ],
              "@babel/preset-typescript",
            ],
            plugins: ["@babel/plugin-proposal-class-properties"],
          });
      }
    }
  }
}

vue info :

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
  npmPackages:
    @fortawesome/vue-fontawesome: ^2.0.6 => 2.0.6
    @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:  4.5.15
    @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.15
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.15
    @vue/cli-service: ~4.5.0 => 4.5.15
    @vue/cli-shared-utils:  4.5.15
    @vue/compiler-core:  3.2.26
    @vue/compiler-dom:  3.2.26
    @vue/compiler-sfc: ^3.0.0 => 3.2.26
    @vue/compiler-ssr:  3.2.26
    @vue/component-compiler-utils:  3.3.0
    @vue/devtools-api:  6.0.0-beta.20.1
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.2.26
    @vue/reactivity-transform:  3.2.26
    @vue/runtime-core:  3.2.26
    @vue/runtime-dom:  3.2.26
    @vue/server-renderer:  3.2.26
    @vue/shared:  3.2.26
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.20.0
    typescript: ^4.5.4 => 4.5.4
    vue: ^3.0.0 => 3.2.26
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1
    vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
    vue-cli-webpack:  1.0.0
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.3)
    vue-router: ^4.0.0-0 => 4.0.12
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.0-0 => 4.0.2
  npmGlobalPackages:
    @vue/cli: Not Found

[Molunerfinn]

I found a solution. Try to import ES module with dynamic import & use /* webpackIgnore: true */:

Molunerfinn/PicGo@bcaf255#diff-37b4428dce773957682d86f1b07d973a0c51f7ae7e377383aabd59707852a3fbR61

Hope this would be help

---

UPDATE :

I found this solution will cause module not found after building... So It's not a solution. I have the same proplem.

@nklayman How do we import pure esm module in main process? Such as fix-path

[SuperKirik]

The same issue with 6th version of execa...

[rzfzr]

@Molunerfinn Did you by any chance find a solution for this?
edit: just tried out the alpha and even the static import worked like a charm!