How to make HMR Work?

[bradennapier]

Just setting this up and it would appear that HMR does not actually work?

In my case I am trying to get the main process to automatically update when I do something. It doesn't appear to do anything at all when I change the "main" source?

I am using custom directories, not sure if that breaks it for whatever reason.

{
  "name": "electron-boilerplate",
  "version": "1.0.0",
  "description": "A boilerplate for Electron",
  "main": "index.js",
  "scripts": {
    "develop": "electron-webpack dev",
    "compile": "electron-webpack"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "app-root-dir": "^1.0.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-register": "^6.26.0",
    "electron": "^1.7.10",
    "electron-builder": "^19.54.0",
    "electron-webpack": "^1.11.0",
    "webpack": "^3.10.0"
  },
  "dependencies": {
    "electron-log": "^2.2.14",
    "source-map-support": "^0.5.2"
  },
  "electronWebpack": {
    "commonSourceDirectory": "app/shared",
    "main": {
      "sourceDirectory": "app/controller",
      "webpackConfig": "dev/webpack/controller"
    },
    "renderer": {
      "sourceDirectory": "app/views",
      "webpackConfig": "dev/webpack/renderer"
    }
  }
}

[bradennapier]

Ok can confirm that HMR does not work if you define custom directories. You should either fix this or note that HMR only works with default settings as it causes quite a bit of confusion and issues.

[navono]

@bradennapier I have the same problem. What's your mean about custom directories?

[bradharms]

I am not able to get HMR working either, even on the renderer thread. These are the only custom additions I have for the renderer thread:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

[navono]

Currently I am not use electron-webpack, just use webpack and webpack-dev-server and react-hot-loader, It's worked.

[loopmode]

Ok can confirm that HMR does not work if you define custom directories. You should either fix this or note that HMR only works with default settings as it causes quite a bit of confusion and issues.

From what I observed, this is not specific to HMR.
Apparently, webpack-dev-server is not recompiling at all when custom source directories are used.

What I did is I just cloned the src folder to app, and added to package.json:

  "electronWebpack": {
    "main": {
      "sourceDirectory": "app/main"
    },
    "renderer": {
      "sourceDirectory": "app/renderer"
    }
  }

When I now do yarn dev, it does compile, and it does use sources from 'app' and not from 'src'.
However, when I make changes to any of the files in app, nothing happens at all - it's not just "no HMR" but rather "no recompile".
When I kill the process and go yarn dev again, I can see the changes.

So, it appears as if WDS is not watching the custom sourceDirectory files.
However, it also is not watching the original src folder anymore - changing files there has no effect as well.
So, maybe it watches invalid paths because somehow, the paths provided via sourceDirector didn't get resolved correctly?

Notes: I am on Windows. I tried sourceDirectory values with and without leading ./, as well as absolute paths with escaped backslashes and with forward slashes - same outcome:
Initial compilation works and picks the right files, WDS does not react to changes to those files.

@bradennapier @bradharms I have a working HMR setup here: https://github.com/loopmode/electron-webpack-quick-start
HMR only in renderer, but for scripts and styles, with sass loader, works fine. No custom directories tho.

[rob3c]

I have the same problem in Windows when using custom folders. Using the standard src-based paths work fine. Any workarounds for this until electron-webpack has proper support for custom locations?

[MatthewFrench]

Anyone know what needs fixed in a pull request for this issue?

[sen0rxol0]

issue solved in 2.0.0 pre-release, anyone having this problem should update

[falnos24865]

As of version 2.1.2 this is still an issue. If I do not specify 'sourceDirectory' values I get HMR working. If I do set a 'sourceDirectory', even if it is to the default paths ('src/main', 'src/renderer') I do not get HMR support.

[falnos24865]

Also chiming in that as of 2.1.2 this is still a very annoying issue. Using symlinks on Linux does not seem to help. I really don't want to have to use the forced paths to get HMR. Ang suggestions?

[jhchill666]

Have been pondering over this issue, and have now submitted a PR.

I have isolated the issue down, as demonstrated in this repo:
https://github.com/jamiehill/rhl-webpack-bug

And you can find progress of the PR here:
gaearon/react-hot-loader#1046

[benjaminadk]

I am using React. As soon as I declared a commonSourceDirectory property in the electron configuration section of my package.json file HMR stopped working. The directory I declared was the default src/common, I had also declared the defaults for main and renderer source directories. As soon as I deleted the commonSourceDirectory property HMR worked again. Looks like just using the defaults and not declaring custom configuration is the best approach to keep HMR working.

[super-ienien]

same issue for me.