electron-userland / electron-webpack

Scripts and configurations to compile Electron applications using webpack
https://webpack.electron.build/
904 stars 171 forks source link

HMR not working with Vue (always doing full reloads) #185

Open lspohn opened 5 years ago

lspohn commented 5 years ago

Hi guys,

I set up a project using electron-webpack using Vue.

HMR is enabled but I always get this error:

Cannot apply update. Need to do a full reload! module.exports @ log.js:26 (anonymous) @ dev-server.js:39 Promise rejected (async) check @ dev-server.js:36 (anonymous) @ dev-server.js:55 emitOne @ events.js:116 emit @ events.js:211 reloadApp @ index.js?http://localhost:56402:221 ok @ index.js?http://localhost:56402:134 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 log.js?1afd:26 [HMR] Error: Aborted because ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css is not accepted Update propagation: ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css -> ./src/renderer/index.js -> 0 at hotApply (http://localhost:56402/renderer.js:478:30) at http://localhost:56402/renderer.js:316:22 at

Happens with any other CSS file, too.

I tried to add "if (module.hot) module.hot.accept()" in my renderer/index.js, and then HMR doesn't do a full reload, but changes in my templates during runtime are not adopted anyway.

Any ideas?

tolawho commented 5 years ago

same this

lspohn commented 5 years ago

Additional info:

I added a line like this for each css file: if (module.hot) module.hot.accept(['../../node_modules/vuetify/dist/vuetify.min.css'], () => {})

HMR does not perform any full reload now. But: Changes are not visible! Console shows "App hot update" and a lot of updates .vue Files but changes in the source code are only visible after reload via CTRL+R.

Any ideas?

This bug makes developing really nasty for me.

PS: Issue happens with stock electron-webpack-quick-start, too:

image

tolawho commented 5 years ago

@lspohn I moved my project to Vue ui and i install plugin vue-cli-plugin-electron-builder . HMR work perfect

jmeinke commented 5 years ago

@lspohn and I have solved this problem by whitelisting the following packages from HMR (in package.json): "whiteListedModules": [ "vuetify", "material-design-icons-iconfont", "typeface-roboto", "typeface-source-sans-pro" ]

For us, this issue can be closed. Thanks!