Electron-forge: HMR / LiveReload not working

[Djiit]

• [x] I have read the contribution documentation for this project.
• [x] I agree to follow the code of conduct that this project follows, as appropriate.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

Hi there, I can't get the livereload working with my app. It was crearted with electron-forge init --template=react. Here is the console output from the devtools when I just hit Cmd+S on any project file (to trigger HMR).

require-hook.js:25 Uncaught TypeError: fn is not a function
    at window.__hot.forEach.fn (/Users/jtanay/dev/cortex/node_modules/electron-compile/lib/require-hook.js:36:34)
    at Array.forEach (native)
    at EventEmitter.electron.ipcRenderer.on (/Users/jtanay/dev/cortex/node_modules/electron-compile/lib/require-hook.js:36:20)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
window.__hot.forEach.fn @ require-hook.js:25
electron.ipcRenderer.on @ require-hook.js:25
emitOne @ events.js:96
emit @ events.js:188
require-hook.js:25 Uncaught TypeError: fn is not a function
    at window.__hot.forEach.fn (/Users/jtanay/dev/cortex/node_modules/electron-compile/lib/require-hook.js:36:34)
    at Array.forEach (native)
    at EventEmitter.electron.ipcRenderer.on (/Users/jtanay/dev/cortex/node_modules/electron-compile/lib/require-hook.js:36:20)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
window.__hot.forEach.fn @ require-hook.js:25
electron.ipcRenderer.on @ require-hook.js:25
emitOne @ events.js:96
emit @ events.js:188

I tried with a blank project (electron-forge init --template=react)and it was working like a charm.

Console output when you run electron-forge with the environment variable DEBUG=electron-forge:*. (Instructions on how to do so here). Please include the stack trace if one exists.

DEBUG=electron-forge:* yarn start
yarn start v0.23.4
$ electron-forge start
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:lifecycle Process Started: Checking your system +0ms
  electron-forge:lifecycle Process Succeeded: Checking your system +18ms
  electron-forge:runtime-config setting key: verbose to value: false +6ms
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:lifecycle Process Started: Locating Application +0ms
  electron-forge:project-resolver searching for project in: /Users/jtanay/dev/cortex +2ms
  electron-forge:project-resolver electron-forge compatible package.json found in /Users/jtanay/dev/cortex/package.json +7ms
  electron-forge:lifecycle Process Succeeded: Locating Application +1ms
  electron-forge:lifecycle Process Started: Preparing native dependencies +1ms
  electron-forge:lifecycle Process Succeeded: Preparing native dependencies +136ms
  electron-forge:hook could not find hook: generateAssets +6ms
  electron-forge:lifecycle Process Started: Launching Application +2ms
  electron-forge:lifecycle Process Succeeded: Launching Application +5ms
2017-05-08 14:56:06.623 Electron Helper[7157:204567] Couldn't set selectedTextBackgroundColor from default ()
HMR sent to all windows!

What command line arguments are you passing?

No specific arguments.

What does your config.forge data in package.json look like?

{
            "make_targets": {
                "win32": [
                    "squirrel"
                ],
                "darwin": [
                    "zip",
                    "dmg"
                ],
                "linux": [
                    "deb",
                    "rpm"
                ]
            },
            "electronPackagerConfig": {
                "asar": true,
                "quiet": true
            },
            "electronWinstallerConfig": {
                "name": "Cortex"
            },
            "electronInstallerDebian": {},
            "electronInstallerRedhat": {},
            "github_repository": {
                "owner": "",
                "name": ""
            },
            "windowsStoreConfig": {
                "packageName": "",
                "name": "Cortex"
            }
        }

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to
reproduce your problem. Using electron-forge init is a good starting point, if that is not the
source of your problem.

Please tell me if I can help.

[MarshallOfSound]

@Djiit Can you post your JS code that you wrote for hot reloading. module.hot.accept....

[Djiit]

Yep, here it is (index.html) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="root"></div>
</body>
<script type="text/jsx">
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { webFrame } from 'electron';

import { configureStore, history } from './store/configureStore';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

// Fix zoom at 100%
webFrame.setVisualZoomLevelLimits(1, 1);

const store = configureStore();

const renderApp = () => {
  const Root = require('./containers/Root'); // eslint-disable-line global-require
  render(
    <AppContainer>
      <Root store={store} history={history} />
    </AppContainer>,
    document.getElementById('root')
  );
}

renderApp();
if (module.hot) {
  module.hot.accept('./containers/Root', renderApp);
}
</script>
</html>

[MarshallOfSound]

  module.hot.accept('./containers/Root', renderApp);

This is incorrect syntax, the docs of electron-compile clearly indicate that the accept function accepts a single arguments which is your render function. I.e.

  module.hot.accept(renderApp);

[Djiit]

Thanks for you quick answer. I changed that and I'm still getting the same error. Would you mind re-opening this issue @MarshallOfSound ?

[MarshallOfSound]

Thanks for you quick answer. I changed that and I'm still getting the same error.

That's like legitimately not possible 😆 Like that trace is exactly the issue I just showed how to fix 😕

Can you push your code up to a repo and I'll take a look 👍

[Djiit]

You are right :) . I'm using react-redux and my store configuration function was also usingmodule.hot.accept in a bad way. Thanks again 👍

[liamaharon]

Hey @Djiit @MarshallOfSound , I'm using react-boilerplate and have the same issue. I've removed module.hot.accept from configureStore.js, but now any hot reload breaks my entire Redux setup

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

Did you manage to find a way to use react-redux with Electron Forge v5.x?

Thanks.