Uncaught TypeError: object is not a function makeNotifier.js:2

[syranide]

You helped me a while back getting started and I've slowly gotten it working as it should (it reloads correctly before adding react-hot-loader), but whenever I add react-hot-loader to loaders, I get the following error when loading the bundle.

Uncaught TypeError: object is not a function makeNotifier.js:2

var notifier = require(".../hotloader-test/node_modules/react-hot-loader/makeNotifier.js")("makeNotifier.js", "none");

This is on a minimal test-project:
config: https://gist.github.com/syranide/73cb15ce83f2bc070b2d
devserver: https://gist.github.com/syranide/1713e9065e7221b3e64e

[gaearon]

Looks like Hot Loader tries to hot-load itself.. :-)

I didn't see this issue because I only enabled hot loading for *.jsx files and naturally this didn't include loader's own JS. I'm not sure how to correctly handle it yet, but for now, you could adopt .jsx or .React.js as a suffix of choice for components and only enable Hot Loader for files with this suffix. This will fix the false positive.

[syranide]

Aaaah, that solved it, works perfectly now, many thanks!

FYI, I noticed that if I render a ChildComponent from a ParentComponent, when I modify ParentComponent the ChildComponent is re-rendered twice.

[syranide]

PS. Btw, a stop-gap fix for react-hot-loader if others get caught by the same issue, could be to only enable "hot loading" when the JSX docblock comment is present.

PS2. I ended up doing just /\/myapp\/src\/.*\.js$/ for the test, works just as well for my purposes so far.

PS3. This is seriously cool! I can only imagine if we could one day run dev "unbundled" and avoid the delay to make it almost instant...

[gaearon]

can only imagine if we could one day run dev "unbundled"

I don't get it, what did you mean?

[syranide]

@gaearon Ah (I realize what I wrote made no sense). Perhaps I'm wrong in this, but it seems to me that the biggest delay between updates comes from rebundling all the files and resolving requires. If dev files could be served "unbundled/individually" and hot replaced individually, it could probably make it instant. But there are probably tons of non-obvious issues with this, and probably concerns webpack more than react-hot-loader. (Just dreaming :))

[gaearon]

If dev files could be served "unbundled/individually" and hot replaced individually, it could probably make it instant.

Hot loader relies on Webpack's require/resolve machinery to work out-of-the-box so I doubt it's feasible.

One way to make things faster is to try to re-implement hot loader as a single transforming loader (like JSX loader). Right now, it emits an additional module for each of your modules, so that may contribute to the delay.

Emitting source maps also contributes to the delay.

I think there may be some optimization opportunities in Webpack itself, I wonder if @sokra can weigh on this?

[syranide]

@gaearon @sokra I did a little research (as I should have) and the issue is with source maps as you point out. As awesome as sokra/webpack is he had already fixed it, devtool: 'eval-source-map', voila, now it's almost instant (and just splitting up the bundle is another option when the output becomes too big).

[gaearon]

I'll leave this open because people are hitting it.

[gaearon]

Fixed via 02c9713

[syranide]

Oh, that's awesome 👍 (updated, works great).