Webpack Hot Reloader + ReactJS and Babel

Question

Good evening,

I'm having a bit of trouble implementing the hot reloading feature of webpack. I'm practicing setting up my dev environment myself instead of taking someone else's boilerplate and not actually learning anything. In the terminal I can see that my output file bundle.js is being built on my express server, but there is a disconnect between that server and what is rendered in the client. I know this post is quite long but I want to provide the most information possible.

First my webpack.config.js file:

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

module.exports = {
  devtool: "source-map",
  entry: ["./src/main.js"],
  output: {
    path: path.join(__dirname, "_build"),
    filename: "bundle.js",
    publicPath: "/static/"
  },
  plugins:[
    new webpack.HotModuleReplacementPlugin()
  ],
  module:{
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, "src/"),
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        include: path.join(__dirname, "src/stylesheets"),
        loaders: ["style", "css", "sass"]
      }
    ]
  }
}

One of the issues I have with that file is that I'm under the impression my entry key should have an array as the value that looks like this: ["webpack-hot-middleware/src","./src/main.js"]

But I get this error:

ERROR in multi webpack-hot-middleware/src ./src/main.js
Module not found: Error: Can't resolve 'webpack-hot-middleware/src' in '/Users/MMac/Freelance/slots'

I don't now why this is happening when all the other examples I'm working off of use this.

Second here is my devServer.js

var path = require("path");
var express = require("express");
var PORT = process.env.PORT || 7887;
var webpack = require("webpack");
var config = require("./webpack.config");
var app = express();
var compiler = webpack(config);

var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(express.static(path.join(__dirname + "/_build")));

app.use(require('webpack-hot-middleware')(compiler));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(PORT, function(err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at ' + PORT);
});

Again this is set up 'correctly' according to the other examples I am working off of.

Lastly my package.json

{
  "name": "slots",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "watch": "./node_modules/.bin/webpack -d"
  },
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "body-parser": "^1.16.0",
    "css-loader": "^0.26.1",
    "express": "^4.14.0",
    "node-sass": "^4.3.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "react-router-redux": "^4.0.7",
    "react-transform-hmr": "^1.0.4",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-hot-middleware": "^2.15.0"
  }
}

Thanks for looking over this post and I appreciate any helpful feedback.

Answer 1

Here is just a shot in the dark (there are so many variables that can trip up Hot-Module-Replacement).

I think you are correct, the problem lies in your entry point. try this instead.

entry: [ "webpack-hot-middleware/client", "./src/main.js" ],

Also you need to add your babel presets to your config. Once you add the react-hmre it should work. See below for example.

module: {
 loaders: [
  {
   test: /\.js$/,
   loader: "babel",
   exclude: /node_modules/,
   query: { "presets": ["es2015","react", "react-hmre"] }
  }
 ]
},

If you have a .babelrc file you can also declare it here.

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}