vue3-electron production build facing webpackJsonp not defined problem - vue.js

Question

I'm trying to build an electron app from a vue-cli3 project. The vue project itself works fine both in development and production. Everything works as well if I run a dev mode with npm run electron:serve. But the built electron app would give a Uncaught TypeError: Cannot read property 'webpackJsonp' of undefined in each packed js file.
vue.config.js:
module.exports = {
configureWebpack: config => {
const tsLoader = config.module.rules.find((loader) => loader.test === /\.ts$/);
const tsLoaderIndex = config.module.rules.indexOf(tsLoader);
const webWorkerLoader = {
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
filename: 'WorkerName.[hash].js',
inline: 'fallback',
}
}
]
}
config.module.rules = [...config.module.rules.slice(0, tsLoaderIndex-1), webWorkerLoader, ...config.module.rules.slice(tsLoaderIndex-1)]
// console.log(config.module.rules);
if (process.env.NODE_ENV === 'production') {
config.mode = 'production'
// pack dependencies separately
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'font-size-base': '18px'
},
javascriptEnabled: true
}
}
}
},
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
package.json:
{
"name": "testApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"#ant-design/icons-vue": "^6.0.1",
"#kyvg/vue3-notification": "^2.3.4",
"ant-design-vue": "^2.2.8",
"bioseq": "^0.1.5",
"core-js": "^3.6.5",
"echarts": "^5.3.3",
"idb-keyval": "^5.1.3",
"jszip": "^3.7.1",
"lodash": "^4.17.21",
"pako": "^1.0.11",
"pdfmake": "^0.2.5",
"vue": "^3.2.4",
"vue3-infinite-scroll-good": "^1.0.2",
"xlsx": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#types/electron-devtools-installer": "^2.2.0",
"#types/node": "^16.0.0",
"#types/pako": "^1.0.2",
"#types/pdfmake": "^0.2.1",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"#vue/eslint-config-typescript": "^7.0.0",
"electron": "^13.6.9",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^4.1.2",
"less-loader": "^7.3.0",
"style-resources-loader": "^1.4.1",
"typescript": "~4.1.5",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"worker-loader": "^3.0.8"
}
}
There are some instructions that it may be caused by something wrong with the webpack configuration. But I can only find examples in vue-cli2 webpack.prod.conf.js. How do we modify that in vue-cli3?

Answer 1

Find the clue at https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1706
There was a mistype 'this' in one of my vue templates causing the error. Removing that fixed the problem.