HMR not working

[batusai513]

Hi, first, i want to thank you for this package, it has been really helpful.

I've been facing some problems with the Hot module replacement lately, whenever i save a component, it doesn't inject the new component as it used to.

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
process-update.js?e13e:89 [HMR]  - ./app/pages/not-found.js

I`ve made a small repo for you to test what can be happening
https://github.com/batusai513/hmr-example

Thanks for your help

[standayweb]

Added a pull request to your example, this seems to work with es6 classes for some reason. batusai513/hmr-example#1

[batusai513]

@standayweb thanks for that hint, i'll dig on this

[flexzuu]

hey i just wanted you to know that i have the same problem.

[batusai513]

@flexzuu this is a weird issue, hope the maintainers can check at this anytime soon

[batusai513]

@flexzuu at the moment you can use class components, or use ?reload=true in your entry path for webpack-hot-middleware for a full page reload

[flexzuu]

@batusai513 can you tell me some more details on the ?reload=true thing? I dont want to switch to class components only for the sake of hot reloading.

[batusai513]

@flexzuu if you are following the example, var config = getConfig({}), then you can:

if(process.env.NODE_ENV == 'development'){
  config.entry[0] = config.entry[0] + '?reload=true';
}

but you should totally replace react-hmr for react-hot-loader 3, that worked like a charm; as soon as i arrive to my home, i'll send you what i did.

[standayweb]

@batusai513 I added an issue for upgrading to react hot loader 3. #213

Could you please do a pull request, or send what you did and I'll do one. Thanks!

[batusai513]

@flexzuu i succesfully implemented react-hot-loader@3.0.0-beta.2, now i have hmr for all my components, including functional stateless components, this is my webpack.config.js
npm i -S react-hot-loader@3.0.0-beta.2

var path = require('path');
var getConfig = require('hjs-webpack');
var webpack = require('webpack');

var config = getConfig({
  in: 'app/main.js',
  out: 'dist',
  clearBeforeBuild: '!(images|favicon.ico)'
});

if(process.env.NODE_ENV === 'production'){
  config.plugins[4] = new webpack.optimize.UglifyJsPlugin({
    mangle: {
      except: ['$inject', 'elementRegistry', 'modeling']
    },
    compress: {
      warnings: false
    },
    output: {
      comments: false
    },
    sourceMap: false
  });
}

if(env == 'development'){
  config.entry[0] = config.entry[0] + '?reload=true';
  config.entry.unshift('react-hot-loader/patch');
}

config.resolve.root = path.resolve('.');

config.module.loaders.push({
  test: /\.(js|jsx|babel)$/,
  loaders: ['babel', 'eslint'],
  exclude: /node_modules/
});

module.exports = config;

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

i had to create an app.js file

import React from 'react';
import { Provider } from 'react-redux';
import getRoutes from './routes';
import {authService} from './helpers/api/auth';


function checkAuth(nextState, replace){
  var nextPathName = nextState.location.pathname;
  if(nextPathName == "/login"){
    if(authService.loggedIn()){
      replace({
        pathname: '/',
        state: { nextPathName: nextPathName }
      });
    }
  }else{
    if(!authService.loggedIn()){
      replace({
        pathname: '/login',
        state: { nextPathName: nextPathName }
      });
    }
  }
}

export default function App({store, history}){
  return (
    <Provider store={store}>
      {getRoutes(history, checkAuth)}
    </Provider>
  );
}

and in my main.js file:

import 'babel-polyfill';
import React from 'react';
import ReactDOM, {render} from 'react-dom';
import {browserHistory} from 'react-router';
import { AppContainer } from 'react-hot-loader';
import createStore from './create-store';
import App from './app';
import './styles/main.scss';
import startInitializers from './initializers';

const {store, history} = createStore(browserHistory, {});
startInitializers(store.dispatch, store.getState);

var rootEl = document.getElementById('root');

export default render(
  <AppContainer>
    <App store={store} history={history} />
  </AppContainer>,
  rootEl
);

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default;
    render(
      <AppContainer>
         <NextApp store={store} history={history} />
      </AppContainer>,
      rootEl
    );
  });
}

[flexzuu]

@batusai513 hey thanks for the info. I just added the hot reloading to my config. I will look into the hot reloader 3 but i might wait for an update on hjs-webpack.

if(process.env.NODE_ENV == 'development'){
  config.entry[0] = config.entry[0] + '?reload=true';
}

[lukekarrys]

Thanks for all the debugging in this thread! I'm sure it's helpful to others.

I've been waiting to transition this to react-hot-loader@3 (#213) when I have some time and it's a bit more stable (see gaearon/react-hot-loader#240 and gaearon/react-hot-boilerplate#61), so it's good to hear that is giving better results. But I'm not sure exactly when that will be, and I don't plan to have any releases with fixes for the current HMR method until react-hot-loader@3.