Hotloading only works once per file?

[bedeho]

I have followed your guide in our project, but we are observing that hot loading only occurs the single time you edit a particular file? If you edit different files, they will all reload, but only on the first edit.

Does this failure pattern reveal anything about what we may have messed up?

[anaisbetts]

It should work every time, there's no explicit "first time". Can you enable the DEBUG env var and look for errors in the console output?

[bedeho]

I ran it with the following: DEBUG=*,-babel

here is the output: https://pastebin.com/JZEARtWC

as you can see, there are no errors logged.

I was hoping the error itself may be some what of a clue? Could there be some sort of hooks which are not setup after the first hot loading?

[bedeho]

We dug a bit further, and found out that the problem only occurs on OSX, not on Ubuntu!

Its extremly easy to reproduce. 1) Run electron-forge init my_test_project, using electron-forge 2) As per the guide on your README.md, add enableLiveReload() before BrowserWindow creation. 3) Change index.html and save

On Ubuntu, you can do this multiple times, and the app updates correctly, on OSX, it only does it the first time.

I hope this is specific enough for you to take a look at.

[bedeho]

@paulcbetts sorry to ping you again on this, but any chance you know when you will have a chance to look at this, having a very hard time making any further progress.

[aacotroneo]

Same behavior here (OSX), with react hot loader. Works once per file

[bedeho]

Still stuck here as well.

[aacotroneo]

@bedeho I somehow rearranged a lot of files in my project and it's now working. I don't know what fixed it.

One theory can be this code. I had the require to be the same file.. now I extracted the App to it's own file (./app), don't know how that can generate that weird behaviour. I can do a binary search back to see if I can reproduce now.

export const renderDOM = () => {
    // NB: We have to re-require App every time or else this won't work
    // We also need to wrap our app in the AppContainer class
    const App = require('./app');
    ReactDOM.render(<AppContainer><App/></AppContainer>, document.getElementById('app'));
};

[bedeho]

@aacotroneo Thanks for that follow up. My application component was already its own file, so doesn't help me I am afraid. This is what my renderer function looks like

function render (stores) {
  // NB: We have to re-require Application every time, or else this won't work
  const Application = require('./scenes/Application').default

  if (process.env.NODE_ENV === 'development') {

    const AppContainer = require('react-hot-loader').AppContainer

    ReactDOM.render(
      <AppContainer>
        <Application stores={stores} />
      </AppContainer>
      ,
      document.getElementById('root')
    )
  } else {
    ReactDOM.render(
      <Application stores={stores} />,
      document.getElementById('root')
    )
  }
}

[walleXD]

@bedeho what editor are you using? I was using webstorm and was also facing the same issue as you. Switched to atom and HMR works perfectly!

[timecatalyst]

I'm experiencing the same problem as well on OSX (HMR only works on the first edit of a file). I get "HMR sent to all windows!" in my terminal when I edit/save a file, and the changes are reflected in the running Electron app, but any subsequent changes to the same file go ignored and no message appears in the terminal. If I edit a different file, I see a new "HMR sent to all windows!" message in the terminal and the Electron app properly reloads.

Here's my renderer:

import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';

const render = () => {
  const Main = require('./components/main').default;
  ReactDOM.render(<AppContainer><Main /></AppContainer>, document.getElementById('app'));
};

render();
if (module.hot) { module.hot.accept(render); }

And here's my main:

import {app, BrowserWindow} from 'electron';
import {enableLiveReload} from 'electron-compile';

let mainWindow = null;

enableLiveReload({strategy: 'react-hmr'});

app.on('window-all-closed', () => {
  app.quit();
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 700,
    height: 760,
    titleBarStyle: 'hidden-inset',
  });

  mainWindow.loadURL(`file://${__dirname}/index.html`);
});

My editor is Vim, fwiw.

[bedeho]

@walleXD awesome, WebStorm was some how the problem. I thought it had something to do with OSX, since a colleague on a different OS did not have the problem, but turns out it was the difference in editor causing the problem.

[timecatalyst]

Well I'll be damned. I didn't want to believe it, but editing with nano allows HMR to work just fine. Must be the nature of how Vim saves files to the disk that doesn't jibe with the HMR file tracking. I don't have much experience with Webstorm, but I imagine it's something similar.

UPDATE: I turned off backups and swap files in my vimrc and HMR works now. It's a shame because I like to think of them as nice safety nets, but I'm not exactly editing server configs over unstable network connections so it's probably not a huge deal.

In case anyone is curious, the settings are:

set nobackup
set nowritebackup
set noswapfile

Thanks for the tips @walleXD and @bedeho

[walleXD]

@bedeho One way to circumvent the issue in web storm is to turn off safe write while saving similar to what @timecatalyst did for vim. If any one wants to do so, here you go: ( Settings | Appearance & Behavior | System Settings | Use "safe write" (save changes to temporary file first))

[okonet]

Thanks @walleXD!

[agrublev]

@walleXD god