Hot reload not working

[SimulatedGREG]

Really not sure if I'm missing something obvious, but I've cloned the repo, installed dependencies, and am able to get the app running. But when making changes to *.vue files the entire electron browser reloads the page, instead of injecting the individual component that needs updating (This is also true for even changing initial data of each component). I don't seem to find any errors expect for the warning below.

This is coming from the electron devtools console every time I make a change.

[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)
[HMR] Reloading page

Currently on OS X 10.11.2 using...

electron: 0.37.2
node: 5.10.0
npm: 3.8.3

Thanks!

[bradstewart]

Hmm what specific versions of webpack, webpack-hot-middleware, and webpack-dev-middleware are you using? I'm thinking an update to one of those may be causing this, as getting everything to work with Electron initially required a lot of setting very specific paths.

[SimulatedGREG]

From package.json

    "vue": "1.0.17",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.1.3",
    "vue-router": "0.7.11",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-externals-plugin": "1.0.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"

Actual versions found in each node_module...

[email protected],
[email protected],
[email protected]

[fab1an]

I had a similar problem (with my own webpack config, not this boilerplate project).

I had to include

webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
const webpackConfig = {
...
}
webpackConfig.target = webpackTargetElectronRenderer(webpackConfig);
`

Then it worked.

[SimulatedGREG]

@fab1an Although this is somewhat unrelated to my issue, this boilerplate is actually using node as its target (for __dirname to be accurate). Although using node should work since it also requires the electron apis properly, I think you solution might simplify some of the "initially required a lot of setting very specific paths" @bradstewart stated above.

Looking further into this, I discovered that webpack-target-electron-renderer is now built into webpack by targeting electron-renderer. Check it out here (Docs). This would eliminate the need to manually require the electron apis using plugins like ExternalsPlugin. I was able to get this working in my own setup here.

[bradstewart]

@fab1an that fixed the hot reload issue? Odd...

[bradstewart]

@SimulatedGREG Interesting, I wonder if that fixes the __dirname issue (which is what led me to use target: node and ExternalsPlugin originally instead of target: electron).

I am seeing the hot reload problem now, still trying to figure out exactly what introduced it.

[SimulatedGREG]

In my other setup, using target: 'electron-renderer'seems to solve the __dirname issue and includes the electron apis.

[callmewhy]

@SimulatedGREG Using target: electron-renderer leads __dirname to be \, not the corrent path.

[SimulatedGREG]

My mistake @callmewhy. I believed this to be fixed but its not ¯_(ツ)_/¯ . A temporary work a round I've done in the past is define my __dirname in my entry index.html by doing...

var __root = __dirname

...which makes it available to public scope. This doesn't solve all cases where a proper __dirname is needed but it can do the job sometimes. Then just make sure to add __root to your eslint globals.