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?