react-hot-loader not live reloading pages with multiple path segments

In the React app I’m working on, hot reloading works fine for paths such as /, /contact, /property but not paths with multiple path segments such as /property/:id

Here is my React router file:

import React from 'react';
import { browserHistory, Route, IndexRoute } from 'react-router';

/* View Controllers */
import RootView from 'Views/RootView';
import HomeView from 'Views/home/HomeView';
// A bunch of similar imports

const DefaultRoutes = (store) => {
  return (
    <Route path="/" component={RootView}>
      <IndexRoute component={HomeView} />
      <Route path="home" component={HomeView} />
      <Route path="property" component={PropertyView} />
      <Route path="property/:id" component={PropertyDetailView} />
      {/* A bunch of similar paths */}    
    </Route>
  );
};

export default DefaultRoutes;

And webpack.config.js

function checkEnv(sources) {
  if (process.env.NODE_ENV === 'dev') {
    sources.push('webpack-dev-server/client?http://localhost:2118');
    sources.push('webpack/hot/only-dev-server');
  }
  return sources;
}

var webpack = require('webpack');
var path = require('path');
var plugins = [];

if(process.env.NODE_ENV === 'dev') {
  plugins = [
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ];
}

else if(process.env.NODE_ENV === 'production') {
  plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ];
}

module.exports = {
  entry: {
    app: checkEnv(['./src/front.jsx']),
    vendor: ['./src/vendor.js']
  },
  devServer: {
    historyApiFallback: true,
    host: '0.0.0.0',
    port: '2118'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/'
  },
  //devtool: "source-map", // or "inline-source-map"
  module: {
    preLoaders: [{
      test: /\.(jsx)$/,
      loader: "eslint-loader",
      exclude: /(node_modules)/
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      loaders: ['react-hot', 'jsx'],
      include: /src/,
      exclude: /(node_modules)/
    }, {
      test: /\.(js|jsx)$/,
      loaders: ["babel-loader"],
      exclude: /(node_modules)/
    }, {
      test: /\.(jsx)$/,
      loaders: ["eslint-loader"],
      exclude: /(node_modules)/
    }, {
      test: /\.(js|jsx)$/,
      include: /src/,
      exclude: /(node_modules)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015']
      }
    }, {
      test: /\.scss$/,
      include: /src/,
      exclude: /(node_modules)/,
      //loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
      loaders: ['style', 'css', 'sass']
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.(woff|woff2)$/,
      loader: "url?prefix=font/&limit=5000"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  },
  eslint: {
    configFile: '.eslintrc'
  },
  plugins: plugins,
  resolve: {
    root: path.resolve(__dirname) + "/src/",
    extensions: ['', '.js', '.jsx']
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  }
};

I’m not sure if this is a webpack issue, a react hot loader issue, or something else.

[doomsbuster]

I am facing similar issue and @ericgrosse your fix didnt work for me.

My App has following routes: / - Home page /about - about page /build/:buildId - build sub route

My hot reloader reloads but it fails with the following 404 errors since it tries to fetch the bundle files from the /build/ route

fe92bcf5-f54a-4457-a5c3-449172665e07:13 GET http://localhost:9000/build/vendor.js net::ERR_ABORTED
fe92bcf5-f54a-4457-a5c3-449172665e07:13 GET http://localhost:9000/build/appbundle.d4f597cd2a7f512f1c74.js net::ERR_ABORTED

Update I fixed it by setting the publicPath to / in my webpack config.

[gaearon]

Ah, that’s great to know, thanks for the follow up!