Invalid HMR message error Webpack

Question

I'm getting the following error from Webpack:

Invalid HMR message Followed by a string of very detailed JSON.

There really aren't any resources that I can find to better debug this. Any tips?

Bonus if anyone can give me insight to why require can't be found when it's used throughout the app no problem.

Here are some details:

Running Node/Babel
Using Webpack

NPM dependencies:

  "dependencies": {
    "babel-core": "^6.7.2",
    "babel-polyfill": "^6.7.4",
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "css-modules-require-hook": "^4.0.0",
    "cuid": "^1.3.8",
    "debug": "~2.1.1",
    "express": "~4.12.2",
    "fs": "0.0.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1",
    "serve-favicon": "~2.2.0",
    "webpack": "^1.12.13"
  },
  "devDependencies": {
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-register": "^6.7.2",
    "cross-env": "^1.0.7",
    "css-modules-require-hook": "^4.0.0",
    "eslint": "^2.6.0",
    "redux-devtools": "^3.1.1",
    "redux-devtools-dock-monitor": "^1.1.0",
    "redux-devtools-log-monitor": "^1.0.4",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.10.0"
  }

Webpack config:

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

  var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  devtool: 'cheap-source-map',

  entry: ['webpack-hot-middleware/client',
          './index.js',
  ],
  target: 'node',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules',
      },
      {
        test: /\.jsx*$/,
        exclude: [/node_modules/, /.+\.config.js/],
        loader: 'babel',
        query: {
          presets: ['react-hmre'],
        },
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        CLIENT: JSON.stringify(true)
      }
    })
  ],

  externals: nodeModules

};

Can you post your webpack config? Can you also post a simple component where you are seeing this issue? — Anuj, Apr 03 '16 at 03:29
because "The target: 'node' option tells webpack not to touch any built-in modules like fs or path." @BobSponge — John Doe, Apr 03 '16 at 18:28
Setting the environment variable CLIENT should be able to use true as is without the need for JSON.stringify. — Rob Brander, Apr 05 '16 at 15:58
You'll need to post module.js because the error about require is on line 10. — Rob Brander, Apr 05 '16 at 16:00
It is generated. You can access it by clicking on the right side of the error message where it says 'module.js:10'. — Rob Brander, Apr 05 '16 at 16:57
Also, you can see it by accessing the console in chrome, under the Sources section, there is a webpack:// that you can click on and explore to find module.js — Rob Brander, Apr 05 '16 at 16:58
Can you show me the loading order of your JavaScripts in your `script` tags? — booleanhunter, Apr 11 '16 at 09:00
not quite sure what you mean. If you're referring to the base HTML file that references the bundle, it's one tag. — John Doe, Apr 11 '16 at 15:27

score 1 · Answer 1 · answered Jan 22 '20 at 20:43

Set your target from node to web for the client.js.

If you are bundling a server side React app, you can add to the top of server file:

require('css-modules-require-hook')({
  generateScopedName: '[name]--[local]',
  prepend: []
});

So that the css-files required in SSR react components work.

score 0 · Answer 2 · answered Apr 05 '16 at 16:04

0

You will want to set target to 'web' because your intention is to compile for the web.

You should set the engine to node (which is what I'm assuming you were trying to do using target).

target: "web",
engines: {
  node: "4.x"
},

answered Apr 05 '16 at 16:04

Rob Brander

3,702
1
20
33

1

Thanks for your answer however this doesn't seem to resolve the hmr issue – John Doe Apr 05 '16 at 16:45
making target: "web" will only remove the error - require not defined. I am also dealing with the same problem. I actually think it has something to do with webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr statement in entry of webpack.config.js. I am just not able to figure what is the role of this – DeWy Sady Jul 18 '20 at 14:16

Invalid HMR message error Webpack

2 Answers2