React-hot-loader: Components in subdirectory doesn't reload

Created on 8 Aug 2015 · 5Comments · Source: gaearon/react-hot-loader

Not sure why, I trimmed this down to the smallest possible app:

public/app/js/index.js

import React from 'react';
import App from './App';
import AppBis from './Components/App';

React.render(<div><App /><AppBis /></div>, document.getElementById('app'));

public/app/js/App.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return <h1>Hello, world.</h1>;
    }
}

public/app/js/Components/App.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return <h1>Hello, world.</h1>;
    }
}

Modifying js/App.js triggers RHL fine, but modifying js/Components/App.js doesn't do anything. Nothing at all in the console, no polling, nothing.

Webpack config:

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

module.exports = {
    devtool:   'eval',
    entry:     [
        'webpack/hot/only-dev-server',
        './public/assets/js'
    ],
    output:    {
        path:       path.join(__dirname, 'public/builds'),
        filename:   'bundle.js',
        publicPath: '/builds/'
    },
    devServer: {
        contentBase: __dirname + '/public',
        hot:         true,
    },
    plugins:   [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    resolve:   {
        extensions: ['', '.js', '.jsx']
    },
    module:    {
        loaders: [{
            test:    /\.jsx?$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'public/assets/js')
        }]
    }
};

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Budger</title>
</head>
<body>
    <div id="app"></div>
    <script src="builds/bundle.js"></script>
</body>
</html>

Am I doing something wrong here? I checked Troubleshooting and everything but nothing that fixed it. This is pretty much straight up the example from react-hot-boilerplate so I don't see where I could have gone wrong. I tried using a node server instead of Webpack's devServer option in the config, but same thing.

Source

Anahkiasen

Most helpful comment

Oh for christ's sake. Ok I found the issue, I spent hours changing my codebase, my Webpack config, my folder structure, etc. And it was a goddamn casing issue. My folder was named assets/js/components instead of assets/js/Components which was ok to JS but not to RHL (or Webpack dev server, don't know).

Troubleshooting mentioned this:

Also make sure that your requires have the same filename casing as the files. Having App.js and doing require('app') might trip the watcher on some systems.

So I checked all my files, but not my folders. I'm an idiot.

Anahkiasen on 8 Aug 2015

👍13 😄2

All 5 comments

Troubleshooting mentioned this:

Also make sure that your requires have the same filename casing as the files. Having App.js and doing require('app') might trip the watcher on some systems.

So I checked all my files, but not my folders. I'm an idiot.

Anahkiasen on 8 Aug 2015

👍13 😄2

+1 Thank you @Anahkiasen for coming back and writing your resolution here! Saved me a few hours of debugging! Cheers