React-hot-loader: ReactHotAPI is not a function

Created on 3 Aug 2015 · 7Comments · Source: gaearon/react-hot-loader

I'm using webpack-dev-server and I'm getting this error (with 'react-hot').
Do you know if this is yours and why is it missing?

Source

catamphetamine

Most helpful comment

So, I resolved the issue.
The issue was that I didn't have exclude: /node_modules/, in my javascript loader in webpack configuration.

Now it works

            { 
                test: regular_expressions.javascript,
                exclude: /node_modules/,
                loaders: [babel]
            },

catamphetamine on 4 Aug 2015

👍10

All 7 comments

Can you reproduce it on a small project? I've never seen this before.

gaearon on 3 Aug 2015

Ok, I'll investigate this one and post you with results.

It seems to be present in the project

...

/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {

    eval("'use strict';\n\nmodule.exports = __webpack_require__(236);//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vRzovd29yay9jaW5lbWEvfi9yZWFjdC1ob3QtbG9hZGVyL34vcmVhY3QtaG90LWFwaS9tb2R1bGVzL2luZGV4LmpzPzNhOTgiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWSxDQUFDOztBQUViLE1BQU0sQ0FBQyxPQUFPLEdBQUcsbUJBQU8sQ0FBQyxHQUFlLENBQUMiLCJmaWxlIjoiNS5qcyIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0JztcblxubW9kdWxlLmV4cG9ydHMgPSByZXF1aXJlKCcuL21ha2VNYWtlSG90Jyk7XG5cblxuLyoqIFdFQlBBQ0sgRk9PVEVSICoqXG4gKiogRzovd29yay9jaW5lbWEvfi9yZWFjdC1ob3QtbG9hZGVyL34vcmVhY3QtaG90LWFwaS9tb2R1bGVzL2luZGV4LmpzXG4gKiovIl0sInNvdXJjZVJvb3QiOiIifQ==");

/***/ },

...

var ReactHotAPI = __webpack_require__(5)

...

Maybe it's not supposed to be a function?

module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () {  ...

No idea what's in the module.hot.data variable.

catamphetamine on 3 Aug 2015

I'll continue investigating later this week and I'll post back if I get something.
The project is derived from a boilerplate so there's a lot there: I just copy-pasted everything into my project and of course it didn't work until I found some missing pieces

catamphetamine on 3 Aug 2015

So, I resolved the issue.
The issue was that I didn't have exclude: /node_modules/, in my javascript loader in webpack configuration.

Now it works

            { 
                test: regular_expressions.javascript,
                exclude: /node_modules/,
                loaders: [babel]
            },

catamphetamine on 4 Aug 2015

👍10

Thank you for the solution!! I just ran into the same problem and was able to fix it by excluding /node_modules/. I wonder why it happens only to us and why the boilerplate example doesn't need it.

chanon on 10 Nov 2015

In react-hot-loader, a regex test if performed on the resourcePath. This test should be expanded to include react-hot-loader dependencies. Specifically, react-hot-api, react-proxy, and lodash should be added to the exclusion list. Code section I'm referring to starts on line #13 of index.js:

  var resourcePath = this.resourcePath;
  if (/[\\/]webpack[\\/]buildin[\\/]module\.js|[\\/]react-hot-loader[\\/]|[\\/]react[\\/]lib[\\/]/.test(resourcePath)) {
    return this.callback(null, source, map);
  }