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

[rfgamaral]

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]

Hi @ahfarmer... Sorry to tag you and bother you like this but was wondering if you could give me a little help here since you have an article on Webpack HMR. I've read it, but couldn't get this to work on my end. Thoughts?

[stallter4]

This link helped me as well. the index.html does need to be in the same directory as your output of the webpack number one. and I would also add --inline to your webpack-dev-server command. Even though I did get it working, it usually only works sporadically. So if I make one change to an area, and then make another change in that same area it does not hot update. But every once in a while it sees the changes and updates. Not sure if that helps much but this youtube video did help. https://www.youtube.com/watch?v=9kJVYpOqcVU

Then the next video that starts the HMR is here:

https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

[rfgamaral]

I've been reading a bit more and I believe that the configuration is different with TypeScript and the typical configuration won't work for me. Thanks for your help :)

[rpoitras]

I'm not sure if the Typescript is the root of the problem. I've been struggling to get HMR working with this combo:

• webpack 2.2.0

• webpack-dev-server 2.2.0

• react-hot-loader 3.3.0-beta.6

• react 15.4.2 and redux 3.6.0

• react-router 3.0.0

It was fine with:

• webpack 2.1.0-beta.27

• webpack-dev-server 2.1.0-beta.11

• react-hot-loader 1.3.1

• same react/redux/router versions

I've gone through many threads and think I have the basic webpack and babel config correct. Top level component will be detected but does a full refresh. All other routes do not trigger an HMR update cycle.

[rpoitras]

I'm fine if I leave everything at the latest versions and just roll back react-hot-loader to 1.3.1

[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?

[rpoitras]

@rfgamaral I might be able to put something up on the weekend. Have you followed this guide? https://webpack.js.org/guides/hmr-react/ It has no redux or routing. Including those is what causes me issues.

I've used TypeScript with Angular only.

[rfgamaral]

@rpoitras Can't remember, will have to try that again but won't be able to do it in the next few days. Well, take your time, no need to rush anything. Actually, let me try that guide again when I have the time and if I still can't get it to work, I'll report back. If then you have time to help me out, I'd really appreciate it. For now, do your own thing. Thank you :)

[rpoitras]

@rfgamaral thanks, we all have day jobs 😄

The example in the link I attached above uses PostCSS in it's example ... you don't need that and I would replace the rc webpack packages with the current versions. Good luck.

[rfgamaral]

I actually use postcss, so it's not a problem :)

[SpaceK33z]

Please include a repository reproducing your issue, it's impossible to debug this without a repo. Note that webpack-dev-server does very little in regards to HMR, it only takes care of serving the HMR update files and signaling the page about the update. Everything else is done by webpack.

[rpoitras]

@SpaceK33z I will get something on github within a day or two. Thank you!

[rpoitras]

@SpaceK33z

https://github.com/rpoitras/sample-app

[rpoitras]

I agree this is more likely something I'm doing wrong, or a HMR + react-router issue particular to the combination of libs I'm using.

[rpoitras]

Fixed for me - Updated module requires browser refresh #515

[shellscape]

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