HMR not working as expected, reloads page instead

[metachris]

trafficstars

Hot reloading components does not work at the moment (used to work just fine).

Describe the issue / bug.

When setting up a new project, hot reloading does not work. It used to work, I have a project from about 2 weeks ago (setup the same way) where it works just fine.

How can I reproduce this problem?

• Setup a new project: vue init simulatedgreg/electron-vue my-project
• Install dependencies: yarn
• Start: yarn run dev
• Make a change in the HTML of a component, eg. change a text in src/renderer/components/LandingPage/SystemInformation.vue

It will reload the whole app instead of hot-reloading the component.

Tell me about your development environment.

• Node version: 8.4.0
• NPM version: 5.5.1
• Yarn version: 1.0.1
• vue-cli version: 2.9.1
• Operating System: Darwin

[MarlBurroW]

Same issue

[rmartinm]

I have the same issue. I found a workaround, In the file dev-client.js i commented line 8 (window.location.reload()) And HMR work as espected.

[MarlBurroW]

Your patch works for me @rmartinm, thank you. I think this bug is caused by a dependency because there have been no commits for 3 weeks on the master branch.

[SimulatedGREG]

Sorry for late reply everyone. Just as @MarlBurroW mentioned, this is a dependency issue. Going to disable this until it is resolved. This patch will enable HMR to work as expected, but will not reload the page when index.ejs is modified. A manual refreshed will be needed.

Related https://github.com/jantimon/html-webpack-plugin/issues/680 https://github.com/vuejs-templates/webpack/blob/52a069cb54d27fc596a5f38f81244dde074d1015/template/build/dev-server.js#L38

[Gugwai]

Hi, it's been a long time since this problem has not been solved. This is not a big problem, the workaround is enough...well, was enough.

I updated my dependencies recently, and I now have a similar behavior, while I'm using this workaround. Even with a fresh install, with no optional packages, I get this issue: any code modification will make a "full reload" of the app page.

Could someone confirm or invalidate this, please?

Here is my packages versions, from a fresh vue init simulatedgreg/electron-vue:

• "electron": "^2.0.4"
• "webpack": "^4.15.1"
• "webpack-dev-server": "^3.1.4"
• "webpack-hot-middleware": "^2.22.2"

FYI, I have exactly the same behavior with my project, which have all dependencies versions updated.

From the electron console, I can get these messages, I do not understand it but maybe someone will:

[WDS] App updated. Recompiling... [HMR] bundle rebuilding [WDS] App updated. Recompiling... [WDS] App updated. Reloading... [HMR] bundle rebuilt in 702ms [HMR] Checking for updates on the server... Navigated to http://localhost:9080/

I'm working on a new configuration with webpack-hot-middleware without webpack-dev-server, I'll let you know if I have something valuable for the community.

PS: thank you all for what you've done with electron-vue, it helps me a lot while setup a whole Electron app project with HMR, testing, etc. Love you guys!

[zikosichi]

Have the same problem

[nwittwer]

After quite some time looking for a solution to this on my own project, I realized that the webpack-dev-server package actually has a built-in option for HMR (hot module reloading), so it may not be necessary to use the additional webpack-hot-middleware from the current setup. Simply adding hot: true to the Webpack Dev Server options made it all work as you'd expect—see below for example change.

Open up .electron-vue/dev-runner.js and change from

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

to

const server = new WebpackDevServer(
      compiler, {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        hot: true, // <-- the fix!
        before(app, ctx) {
          // app.use(hotMiddleware) // <-- not necessary!
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

There's more details about the hot option here: https://webpack.js.org/configuration/dev-server/#devserverhot.

NOTE: I've updated a few versions from this template's default versions: Electron 6.0.4, Webpack 4.39.2, webpack-dev-server 3.8.0

[zikosichi]

This worked. Thanks a lot for the fix

[Gugwai]

Thank you @nwittwer ! With the hot option, it works as expected.

Note: when I comment the line app.use(hotMiddleware), this still works but I got a HMR request error : GET http://localhost:9080/__webpack_hmr 404 (Not found) (with Electron 6.0.4, Webpack 4.39.2, webpack-dev-server 3.8.0).

[nwittwer]

@Gugwai Glad it worked! As a heads up, this is a slippery slope to find a workaround until there's an official fix.

Here's what I found to fix the issue you mentioned:

1. Running this: npm run dev -->
2. .electron-vue/dev-runner.js (where we added hot property) -->
3. .electron-vue/dev-client.js

It looks like dev-client.js was setup to relay information about compiling the main process and listen for when the index.ejs template gets modified and re-compiles. The first line is what's giving the 404 error. If you don't need those features, you can comment out that whole file.

Again, these changes do go off course from this project. I am just sharing what has worked for me, in hopes it will help others until there's a more official fix or community project.

[lvbirui]

thank you @nwittwer . it worked . it confused me for a long time.

[jhonyjss]

Hello, I was trying to update some components and nothing happened, but after put this config it works !

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        hot: true,
        liveReload: true,
        watchOptions: {
          poll: true
        },
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

    server.listen(9080)
  })