Getting Started with React-Hot-Loader

Question

I am trying to use React Hot Loader in React. I installed react hot loader by running "npm install --save-dev react-hot-loader". I tried to follow the http://gaearon.github.io/react-hot-loader/getstarted/ but couldn't understand. I am attaching my webpack.config.js and package.json. I made changes as listed in document. But I am not able to see the changes I make in components on the fly. What is wrong?

webpack.config.js

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

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        './dev/js/index.js' // Your appʼs entry point
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot','babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

scripts from package.json

 "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
  }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Webpack</title>
</head>
<body>

    <div id="root"></div>
    <script src="js/bundle.min.js"></script>

</body>
</html>

I am not able to follow the steps they mentioned in document. I want to know what changes should I make in these two files — EdG
– EdG, Commented Sep 1, 2016 at 18:20
Which step was the issue? Were you not able to technically understand what to do, or is English not your native language? More details should be provided so folks can help you with an explicit problem. — lux
– lux, Commented Sep 1, 2016 at 18:22
The configuration step was the issue. If someone can edit the code of above two files it would be helpful — EdG
– EdG, Commented Sep 1, 2016 at 18:27

Ben Sidelinger · Accepted Answer · 2016-09-01 19:25:15Z

1

Ok, now you need to add the hot loading script to your html file, right before bundle like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Webpack</title>
</head>
<body>

    <div id="root"></div>

    <script src="http://localhost:3000/webpack-dev-server.js"></script>
    <script src="js/bundle.min.js"></script>
</body>
</html>

It's under localhost:3000 because I see that in your webpack config. I usually just leave it under :8080, but I think it needs to be like this based on your config.

answered Sep 1, 2016 at 19:25

Ben Sidelinger

1,3697 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EdG Over a year ago

I added. But when I run "npm start" it gives me an error saying Cannot find module '/home/apurv/Desktop/React-Redux-Boilerplate-master/server.js'. Also I added my Project Directory Structure.

EdG Over a year ago

Also I have attached my Project Directory Structure in question.

Ben Sidelinger Over a year ago

It seems like you're importing a file called server.js from somewhere. I don't see that in your directory structure, so I'm not surprised webpack can't find it. If you search for an import or require for 'server' in your code that'll show what file webpack is choking on.

Ben Sidelinger Over a year ago

You need to find the file that's trying to import (or require) server.js.

Collectives™ on Stack Overflow

Getting Started with React-Hot-Loader

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related