Can't get hot reload to work with my setup...

I’m using the following webpack and webpack-dev-server versions:

"webpack": "^2.2.0-rc.7",
"webpack-dev-server": "^2.2.0-rc.0"

And this is my webpack.config.js file:

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: path.join(__dirname, 'app', 'src', 'Index.tsx')
    },

    output: {
        path: path.join(__dirname, 'build'),
        filename: '[name].[hash:8].js'
    },

    devtool: 'source-map',

    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },

    module: {
        rules: [
            {
                include: path.join(__dirname, 'app'),
                loader: 'awesome-typescript-loader',
                test: /\.tsx?$/,
            },
            {
                include: path.join(__dirname, 'app'),
                loader: 'source-map-loader',
                test: /\.js$/,
                enforce: 'pre'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'app', 'index.html'),
            favicon: path.join(__dirname, 'app', 'favicon.ico'),
            inject: 'body',
        })
    ],

    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    }
};

In case it’s not obvious, I’m using TypeScript (not sure how relevant that is):

"awesome-typescript-loader": "^3.0.0-beta.18",
"typescript": "^2.1.5",

I also have an NPM script to launch the server (npm run server):

"scripts": {
    "server": "./node_modules/.bin/webpack-dev-server --hot",
}

My app is currently very simple… I have the main React page (Index.tsx) which renders 2 components (CompA.tsx and CompB.tsx). When I change CompB, I expect the page to NOT full reload and instead just that component to reload. Is that what HMR is supposed to do, correct?

But there’s what I get when I change CompB.tsx:

I know there’s a recent issue (#741) about a similar problem and I looked into the suggested link (http://andrewhfarmer.com/webpack-hmr-tutorial/) but didn’t help. Since I’m using beta versions and TypeScript and those might have some impact on my exact problem, I decided to create a new issue. Hope it’s ok…

Any idea what am I doing wrong?

[rfgamaral]

@rpoitras Can you post a minimal configuration of your working setup so I could see what I need to do to get my own working? If possible without redux and react-router, not sure if those complicate things.

There’s so much misinformation lying around that I’m not sure what exactly is the proper setup to get HMR working.

But do you use TypeScript too?

[shellscape]

Pruning due to age, inactivity, and apparent solutions/workarounds.