1

I am running webpack-hot-reload and webpack-dev-server middlewares for express.

My webpack configuration:

const webpackConfig = {
    entry: [
        project.app.entry,
    ],
    output: {
        path: project.path.out,
        filename: 'bundle.js',
        publicPath: '/',
    },
    module: {
            rules: [],
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            },
        }),
    ],
    devtool: DEV ? 'source-map' : false,
};

My index.js

import React from 'react';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';

import App from './containers/App';
import store from './store';

const MOUNT_NODE = document.getElementById('root');

function render() {
    ReactDom.render(
        <Provider store={store}>
            <Router>
                <App />
            </Router>
        </Provider>
    , MOUNT_NODE);
}

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept('./containers/App', () => render());
    module.hot.accept('./reducers/index.js', () => {
        console.log('Accepted');
        store.replaceReducer(require('./reducers').default);
        render();
    });
}

render();

Webpack has more configuration added later: eslint, babel-loader, etc. I don't think it changes anything though. When I update one of my reducers I still get the following error.

The following modules couldn't be hot updated: (Full reload needed) ./client/reducers/user.js

user.js is required in reducer/index.js However it works fine when I reload components inside of the App.js file, which is also hot reloaded. How could i fix this issue?

August
  • 1,722
  • 5
  • 20
  • 37

0 Answers0