react-hot-loader not work

[MrZhang123]

Description

I use react-hot-loader and webpack for HMR, i use hot for App , but when i save the code , hot reload not work , how i change ?

Environment

node: 8.9.0
react-hot-loader: 4.1.1
webpack :4.6.0
webpack-dev-server: 3.1.3

Code

webpack.config.js

module.exports = {
  entry: {
    main: [
      'babel-polyfill',
      path.resolve(__dirname, '../src/main.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: './',
    filename: '[name].js',
    chunkFilename: 'chunk/[name].[chunkhash].js'
  }
}

// --------

config.entry.main = (config.entry.main || []).concat([
  'react-hot-loader/patch',
  `webpack-dev-server/client?http://localhost:${PORT}/`,
  'webpack/hot/dev-server'
])
config.plugins = (config.plugins || []).concat([
  new webpack.HotModuleReplacementPlugin()
])
config.mode = 'development'

const compiler = webpack(config)

const server = new WebpackDevServer(compiler, {
  hot: true,
  noInfo: true,
  quiet: true,
  filename: config.output.filename,
  publicPath: '/',
  stats: {
    colors: true
  }
})

App.js

import { hot } from 'react-hot-loader'

import RouterLink from './views/RouterLink'

class App extends Component {
  render () {
    return <RouterLink />
  }
}

export default hot(module)(App)

store.js

const configureStore = () => {
  const store = createStore(
    reducers,
    applyMiddleware(thunk, middleware)
  )

  if (process.env.NODE_ENV !== 'production'){
    if (module.hot) {
      module.hot.accept('../reducers', () => {
        store.replaceReducer(reducers)
      })
    }
  }
  return store
}

main.js

import configureStore from './store'

const history = createHistory()
export const store = configureStore()

ReactDOM.render((
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>
), document.getElementById('app'))

[theKashey]

Please double check console output. It should contain something.
First thing to check - does webpack HMR working, as long it might not.
Usually, then RHL does not work - you will see the change, after page reload. But if HMR does not work - you will see nothing.

[theKashey]

We have a lof of examples, and almost all of them uses webpack. Pick any, and try to use them.

[MrZhang123]

@theKashey Thanks for you response , i will try it later😄

[MrZhang123]

@theKashey Hi, when i remove the react hot load , the webpack HMR can work , but add the react hot load, those component use redux can't hot reload , i add config in redux store like this

  if (process.env.NODE_ENV === 'development') {
    if (module.hot) {
      module.hot.accept('../reducers/index.js', () => {
        store.replaceReducer(require('../reducers/index.js').default)
      })
    }
  }

change the those use redux component , save code, it doesn't change , and console the log

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/views/Content/Home/index.js
[HMR] App is up to date.

[theKashey]

🤷‍♂️ only one file was updated, is that something you not expected?
Sorry, I could not predict, why you are having issues - better publish an example to reproduce.

[MrZhang123]

@theKashey Sorry for that i didn't describe my question clearly.

I expect use react-hot-reload and webpack HMR for my react project to get better development experience , I use webpack HMR , when i change those component that associated redux , the page refresh , so I add react-hot-reload.

According to some article add react-hot-reload need config redux store , so i config store like this:

import { createStore, applyMiddleware } from 'redux'
import reducers from '../reducers'
import middleware from '../middleware'
const initialState = {}

const configureStore = () => {
  // applyMiddleware(thunk, middleware)
  let enhancer = applyMiddleware(...middleware)

  const store = createStore(reducers, initialState, enhancer)

  if (process.env.NODE_ENV === 'development') {
    if (module.hot) {
      module.hot.accept('../reducers/index.js', () => {
        // const nextReducer = combineReducers(require('../reducers'))
        // store.replaceReducer(nextReducer)
        store.replaceReducer(require('../reducers/index.js').default)
      })
    }
  }
  return store
}

export default configureStore

But it's don't work . I change the component those use redux , the app not change.

Do i need config the redux store when i use react-hot-reload ? how to config ? I don't find how to config in react-hot-reload docs😅

My project: https://github.com/MrZhang123/Web_Project_Build/tree/master/react-webpack

[MrZhang123]

@theKashey I use react hot loader v4.1.2 , I find in docs that v4 add hot to get hot load , just add hot(module)(App) in root component . I think it means if I do this , the whole app component will hot reload . In fact , it's not , it just let root component get hot load . Does that means hot(module)(App) just can let component that add this code get hot load ? I want to whole react component get hot load , how to do this ?

[theKashey]

Hey! No, you dont need to add anything related to redux and so on. It should "just work"™️
I'll check the repository you have provided.

[MrZhang123]

@theKashey Thanks you response . I find that if I use react router (v4), the hot loader not work , so maybe react router cause this problem.

[theKashey]

Sorry for a delay. Only now I got some time to have a look.
Everything is simple, and described in readme. Not very clearly, but described.

https://github.com/gaearon/react-hot-loader#code-splitting

As long your components are updated, not remounter lifeCycle of your asyncLoader will not be triggered.
There is 3 ways to fix the problem:

1. Export each "exported" component (the one you will "import" later) with hot. Then it will "reload" itself.
2. Use hot-loader compatible loader - loadable-components or react-imported-component
3. Patch your own imported Component to become "compatible". Unfortunately, with React 16.3, this is not as simple as before.

Better stick to first 2 options.

[MrZhang123]

@theKashey you means if I want all component have hot reload , I need to add hot(module)(componentName) for all component ?

[theKashey]

No, only for the ones you are dynamically import. Hot loader could not update components you have to "re"-import first.
So - ok make them self-reloadable (wrap with hot), or use RHL-friendly loader.

[MrZhang123]

@theKashey ok, I understand , thanks for your reply 😄

[Cherdinand]

@MrZhang123 actually i had the same proplem that I need to add hot(module)(componentName) for all component if I want all component have hot reload. So i would like to know how you fix it? thanks

[theKashey]

First try to update RHL. We had an error related to updates.

[Cherdinand]

Sry, i make a mistake that send hot:true and --hot at the same time, when i remove one of them, it works fine.

[hannadrehman]

I have a strange behavior. when i first save changes webpack compilation is successful and I see console updates in my browser with related network calls for the updated files, but my view is not updated.
if i make more changes and save. the previously updated changes reflect in the view. has anyone faced similar issue ?

[theKashey]

@hannadrehman - yep, we had bugs like it. React-Hot-Loaded failed to trigger forceUpdate on components, and React just didn't re-render them.
Then, on any external change, including HMR, something could hit re-render, but usually in the "current", not "future" state.

I was absolutely sure, that I've fixed this half year ago.

So - which version are you using, and do you have some code to reproduce?

[ryami333]

I'm seeing the same thing as described above. Successful compile, successful network calls for the new chunk, happy looking console log entries... but component does not re-render. I'm using latest version of react-hot-loader, webpack, webpack-dev-server. Have tried both the AppContainer and hot approaches, following the Readme to the very letter, but no still no luck.

[theKashey]

setConfig({logLevel: 'debug'})
https://github.com/gaearon/react-hot-loader#setconfigconfig

[pcmaffey]

Getting the same problem as @ryami333, and debug outputs React-hot-loader: unable to merge...

I'm guessing its related to #963.

UPDATE:
Indeed, I just switched from react-loadable to https://github.com/theKashey/react-imported-component and RHL now works.

[theKashey]

In our internal tests react-loadable works pretty well. Could you share some details about your case, even if you fixed it already?

[pcmaffey]

Sure- Using the same HMR config as in the webpack docs... with babel plugins "react-hot-loader/babel" "syntax-dynamic-import". Using RHL 4.3.4, and the hot(module) method.

Had this same experience--with react-loadable:

Successful compile, successful network calls for the new chunk, happy looking console log entries... but component does not re-render. I'm using latest version of react-hot-loader, webpack, webpack-dev-server.

Only thing I would add is that css changes did re-render. Components did not.

Switching to react-imported-component (only change) fixed it.

[theKashey]

anyway - I'll be keen if you could share some example, as long in our all-async-component-loaders-i-found example react-loadable is the one who actually works.

[ArtemBernatskyy]

Yeah. In this case, I realized that the issue was with React-Redux and as I downgraded from v6.0.0 to v5.1.1, it started working.

Source: #1049 (comment)