Hot reload issue


I’ve been having issues getting hot reloading working with my application. To start, here is my current webpack.config.js:

var path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "app/index.jsx"),
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: 'http://localhost:8080/build/',
    filename: 'app.js'
  module: {
    loaders: [
            test: /\.jsx?$/,
            loader: 'babel',
            exclude: /node_modules/
            test: /\.css$/,
            loader: "style-loader!css-loader"
            test: /\.json$/, 
            loader: "json-loader"

As you can see, the entry point is defined as app/index.jsx. This file is very simple:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css'
import routes from './router.jsx'


Whenever I make a change to this file, the hot reload is triggered. In addition, changes to files that are imported here (like styles.css) are also reloaded. The issue is, all of my components are obviously imported in my router. Any changes to my components therefore are not hot reloaded. How can I get this working properly?


You may have better luck asking in a venue with a lot of React users. There’s no guarantee that one will find your thread here.


This issue is probably more closely related to Webpack and Webpack-dev-server. However, many Electron users have a similar setup, so hopefully somebody can chime in.


I have a question open on StackOverflow with a bounty, if anyone can figure it out, feel free:


Still having this issue, bump.