Cannot import and use mqtt.js in main process

[Eric.Tsai]

Describe the bug
Build failed when import mqtt.js in main process

To Reproduce

1. Create a Vue3 typescript project with vue-cli

$ vue create demo
$ cd demo
$ npm i

2. add electron-builder plugin

$ vue add electron-builder

3. downgrade @vue/cli-plugin-typescript

$ npm r @vue/cli-plugin-typescript
$ npm i -D @vue/cli-plugin-typescript@^4.5.19

4. install mqtt.js

$ npm i mqtt

5. import and us mqtt.js in background.ts

// src/background.ts
import mqtt from 'mqtt'
mqtt.connect('someaddress', {});

6. serve

$ npm run electron:serve

Error message

 error  in ./node_modules/mqtt/dist/mqtt.esm.js

Module parse failed: Unexpected token (2:14740)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| var hs=Object.defineProperty;var qg=Object.getOwnPropertyDescriptor;var Dg=Object.getOwnPropertyNames;var jg=Object.prototype.hasOwnProperty;var be=(t,e)=>()=>(t&&(e=t(t=0)),e);
...
...
| `)&&(e=e.replace(qE,"%0A")),e.includes("\r")&&(e=e.replace(DE,"%0D")),e.includes("	")&&(e=e.replace(jE,"%09")),i.pathname=e,i}var X,tE,pt,rE,iE,nE,sE,Za,Zp,eg,tg,oE,aE,Ya,ni,Ja,Xa,rg,ig,uE,fE,cE,hE,dE,el,pE,gE,yE,bE,wE,_E,AE,IE,TE,RE,CE,BE,PE,OE,xE,kE,ME,tl,LE,UE,NE,qE,DE,jE,ag=be(()=>{v();m();_();$p();Hp();Qp();Xp();Ka();X={},tE=zt,pt={isString:function(t){return typeof t=="string"},isObject:function(t){return typeof t=="object"&&t!==null},isNull:function(t){return t===null},isNullOrUndefined:function(t){return t==null}};X.parse=Oi,X.resolve=function(t,e){return Oi(t,!1,!0).resolve(e)},X.resolveObject=function(t,e){return t?Oi(t,!1,!0).resolveObject(e):e},X.format=function(t){return pt.isString(t)&&(t=Oi(t)),t instanceof Fe?t.format():Fe.prototype.format.call(t)},X.Url=Fe;rE=/^([a-z0-9.+-]+:)/i,iE=/:[0-9]*$/,nE=/^(\/\/?(?!\/)[^\?\s]*)(\?[^\s]*)?$/,sE=["{","}","|","\\","^","`"].concat(["<",">",'"',"`"," ","\r",`

 @ ./src/background.ts 5:0-24 12:4-8
 @ multi ./src/background.ts
 ERROR  Build failed with errors.

Environment (please complete the following information):

• node - v14.21.3
• npm - v6.14.18

[Eric.Tsai]

I solved it by upgrading vue-cli-plugin-electron-builder to 3.0.0-alpha.

vue add electron-builder@alpha

see https://github.com/nklayman/vue-cli-plugin-electron-builder/releases/tag/v3.0.0-alpha.0