Home » Javascript » React Hot Loading Not Working

React Hot Loading Not Working

Posted by: admin November 1, 2017 Leave a comment

Questions:

I followed the git documentation for adding in hot-reloading for React but I still can’t get it to work. I am using webpack loader instead of babel. Here is my webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: ['react-hot-loader/patch', './client/index.js'],
    output: {
        path: path.join(__dirname, 'client'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=es2015,presets[]=react'],
            exclude: /node_modules/,

        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

When I do npm run webpack it successfully builds the bundle.js.
Now onto my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'
import App from './components/app';



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

render(App);

// Webpack Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./components/app', () => { render(App) })
}

Basically, copied the code from the example. However, when I modify my app.js file, it doesn’t reload anything…What am I missing?

Answers: