vue-cli-plugin-electron-builder
vue-cli-plugin-electron-builder copied to clipboard
Published
20 hours ago •
nklayman
nklayman
Main process fail on class & require() of ES Module
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
I found a solution. Try to import ES module with dynamic import & use /* webpackIgnore: true */:
https://github.com/Molunerfinn/PicGo/commit/bcaf255a9c0e69bb7288136866e154ec6af6a63f#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
