0

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?

Project Directory Structure

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>
EdG
  • 2,243
  • 6
  • 48
  • 103
  • What's the specific issue you're encountering? – lux Sep 01 '16 at 18:19
  • 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 Sep 01 '16 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 Sep 01 '16 at 18:22
  • The configuration step was the issue. If someone can edit the code of above two files it would be helpful – EdG Sep 01 '16 at 18:27
  • @lux I have edited my question. – EdG Sep 01 '16 at 18:42
  • can we see your index.html? Looks like you have a bad url for the bundle. – Ben Sidelinger Sep 01 '16 at 18:51
  • I added index.html. After making changes listed in the document only browser is not showing up anything. Before it was showing the content properly – EdG Sep 01 '16 at 18:56
  • I rectified the mistake in url. Now it's working, but I am not able to see the changes I make in components on the go on browser. Changes are supposed to reflect on the go after installing boilerplate. What is the problem – EdG Sep 01 '16 at 19:00

1 Answers1

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.

Ben Sidelinger
  • 1,309
  • 7
  • 12
  • 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 Sep 01 '16 at 19:40
  • Also I have attached my Project Directory Structure in question. – EdG Sep 01 '16 at 19:46
  • 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 Sep 01 '16 at 19:58
  • You need to find the file that's trying to import (or require) server.js. – Ben Sidelinger Sep 02 '16 at 05:15