nklayman / vue-cli-plugin-electron-builder

Easily Build Your Vue.js App For Desktop With Electron
https://nklayman.github.io/vue-cli-plugin-electron-builder/
MIT License
4.12k stars 280 forks source link

Cannot import and use mqtt.js in main process #1993

Closed ericlogic closed 7 months ago

ericlogic commented 7 months ago

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):

ericlogic commented 7 months ago

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]()