Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components in subdirectory doesn't reload

See original GitHub issue

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.

Issue Analytics

State:
Created 8 years ago
Comments:5

Top GitHub Comments

17reactions

Anahkiasencommented, Aug 8, 2015

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.

1reaction

Anahkiasencommented, Jan 16, 2017

I updated my folder to match the casing in my imports. You can install this plugin to help you and prevent further similar errors.