Webpack react-hot-loader无法正常工作

Question

Below is my webpack.config.js code

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

module.exports = {
    // context: __dirname + "/app",
   entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
     './src/main.jsx'],
    output: {
        path: "./build",
        filename: "main.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loaders:  ['react-hot', 'babel'],
          include: path.join(__dirname, 'build'),
          query:
            {
              presets:['es2015', 'react']
            },
          plugins: [
            new webpack.HotModuleReplacementPlugin()
          ]
        }
      ]
    }
}

And this is script code of my package.son

  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },

And this is my main.js code

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('example')
);

When I type "npm run dev" , I got this error

ERROR in ./src/main.jsx
Module parse failed: /Users/testaccount/Documents/React/test-react/src/main.jsx Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|   <h1>Hello World!</h1>,
|   document.getElementById('example')
| );
 @ multi main

And I go to localhost:8080 and nothing show. Anyone knows what happened? Why my react-hot-loader is not working?

Answer 1

I made it work using the solution found here . Basically what needs to be done is add module.hot.accept() to the script where you render your component to.

For example:

import React from 'react';
import ReactDOM from 'react-dom';
import MainLayout from './components/MainLayout.jsx';

ReactDOM.render(
  <MainLayout />,
  document.getElementById('root')
);

module.hot.accept(); // <-- this one.

Answer 2

Refer to react-hot-boilerplate github and check .babelrc file in the github.

Maybe I don't, also check include , query , 0.0.0.0 in your settings.

Remember, as per your babel version(5 or 6), settings have to be different.

And now react-hot-loader is deprecation. Refer to react-hot-loader github .

Answer 3

By default react js provides hot reloading feature. Still if it's not working:

Try adding -- --reset-cache to your run command. *for Linux OS

Ref: React js hot reload issue fix for Linux OS

Duplicate issue in github