reloads page completly on every change

[sir-marc]

var webpack = require('webpack');
var path = require('path');
module.exports = {
    context: __dirname,
    entry: [
        'webpack-dev-server/client?http://localhost:8090/', // WebpackDevServer host and port
        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        './src/index' // Your appʼs entry point
    ],
    output: {
        path: __dirname + "/dist",
        publicPath: "dist/",
        filename: "bundle.js"
    },
    devtool: "source-map",
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
        },
        port: 8090
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'react-hot',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    plugins: ['transform-object-rest-spread', 'transform-decorators-legacy'],
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

This is my webpack config. The "hot reloading" kinda works, but it keeps reloading the whole page, every time I hit save (it outputs an error, but i cant read it, as it instantly reloads the page). My whole state is lost then. So I could just work without hot reload.
Does anyone has an idea why?

[shikelong]

I use the webpack v1 and react-hot-loader v3.
Now I have also encountered this problem. I want to know how you solve this problem? Thank you。:)

[sir-marc]

// for hot reloading
if (module.hot) {
    module.hot.accept();
}

in the index.js did it for me.

So it looks something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Perf from 'react-addons-perf';
import { Provider } from 'react-redux';

import App from './App';
import store from './store';

// for hot reloading
if (module.hot) {
    module.hot.accept();
}

window.Perf = Perf;

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));

[shikelong]

Thank you. I will try it.

[sir-marc]

In the meantime I changed a lot:

webpack config:

    entry: {
        app: './src/js/index.js',
    },
       devServer: {
        port: 8090,
        hot: true,
        inline: true,
        publicPath: '/',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
            },
        ],
    },
       plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],

.babelrc:

{
    "presets": ["es2015", "react"],
    "plugins": [
        "transform-object-rest-spread",
        "transform-decorators-legacy",
        "transform-class-properties",
        "react-hot-loader/babel"
    ],
}

I moved the babel queries to the babelrc file and also removed the react hot reload from the wepack entry but added it in the babelrc file.

[calesce]

You need react-hot-loader/patch, and <AppContainer/>, see our docs for 3.0. Also note that decorated components currently don't reload (#279).

[agupta1989]

@calesce link is dead.. can you please update it ?

[StalkAlex]

@agupta1989 here's new link https://github.com/gaearon/react-hot-loader/tree/next/docs. Just change branch to next and it's within docs folder.