Webpack 2 + React Hot Loader Not Working

Question

I'm trying to get Webpack 2 + React Hot Loader working but it doesn't seem to hot reload. It renders the webpage correctly but anytime I make any changes to the "App.js" file, it doesn't do anything.

webpack.config.json

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry: {
    'app': [
      'react-hot-loader/patch',
      path.join(__dirname, 'src/main.js')
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }
    ]
  }
};

.babelrc

{
  "presets": [
    ["env", {"modules": false}],
    "react"
  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

package.json

{
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot"
  },
  "dependencies": {
    "express": "^4.15.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "react-hot-loader": "next",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  }
}

I'm running webpack-dev-server through the CLI with the --hot and --inline flags.

main.js

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

import App from './containers/App'

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  )
}

render(App)

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

App.js

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="container">
          <h1>Testing</h1>
        </div>
      </div>
    )
  }
}

So to test it out, I'll run yarn dev and the server will start. Everything compiles and webpack will output webpack: Compiled sucessfully. However, any changes made to App.js will not reload the webpage. The console on the webpage itself only outputs this:

[HMR] Waiting for update signal from WDS...
bundle.js:15580 [WDS] Hot Module Replacement enabled.

I tried various methods listed here (https://github.com/webpack/webpack-dev-server/issues/100) but none of them seemed to work.

What platform/environment are your code running on? I mean the OS. — Thanh Nguyen
If you are working with Linux OS, please check out this article: webpack.github.io/docs/troubleshooting.html#not-enough-watchers — Thanh Nguyen
I just tested it on my Mac and everything works out fine. Was trying to dev on Windows + Ubuntu Bash beforehand. I'll checkout the link to see if it'll help with my Windows machine. — DeadCake
What does that mean, "windows + ubuntu"? You were running this in a virtual machine? — Gimby
No. I was running "Bash on Ubuntu" that came with the Anniversary Edition update of Windows 10. — DeadCake

Sagiv b.g Sagiv b.g · Accepted Answer · 2017-04-25T07:59:01

on your main.js try changing this:

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

to this:

  if (module.hot) {
    // Enable Webpack hot module replacement for Component
    module.hot.accept('./containers/App', () => {
      render(App);
    });
  }

You can see a more detailed example in the docs

EDIT :
According to the docs example you will need to call render in the callback of accept.

maybe take a look at the webpack config as well.

Webpack 2 + React Hot Loader Not Working

1 Answers