Error in browser when using the plugin method in Gulp+Browserify+Browsersync

[mykone]

Using the plugin technique in my Gulp environment.

var watchify = require('watchify');
watcher = watchify(bundler);
watcher.plugin(hmr);

Builds ok, but when browser runs, I am getting:

Cannot find module './node_modules/browserify-hmr/inc/index.js'

Not sure what I am doing wrong, but, if I run "watchify -p browserify-hmr" from the command line , as in your example, it works fine. I am trying to integrate it in my current dev environment which is using Gulp+Browserify+BrowserSync.

[Macil]

Try applying browserify-hmr before watchify:

bundler.plugin(hmr);
var watchify = require('watchify');
watcher = watchify(bundler);

Let me know if that works for you.

Note that there's an open issue about using browserify-hmr with browserSync; I haven't investigated if they are compatible.

[mykone]

Thanks so much for your quick response. However, doesn't matter which order I put it or whether I use hmr as the plugin to browserify, or watchify. I still get the above error. I think the issue is the ./node_modules/browserify-hmr/inc/index.js is either not bundled, or isn't being referenced properly, and this is why it's trying to load it in the browser.

[Macil]

Does this only break when you add watchify? Do you ever change the build process's current working directory? Is the build process's current working directory (should be the directory that the gulpfile is in) the same directory that your package.json (that lists browserify-hmr as a dependency) is located in? Can you make a small reproducible example?

[mykone]

1. Watchify has always been in the build config.
2. Don't change build directory.
3. gulpfile.js is in same directory as package.json

The point though is, all the other libraries include fine. So the problem is the reference to HMR on the client side fails. I can see the [HMR] output in the console at build time, and also indicating the listening port. Just the client side is failing.

On Friday, October 28, 2016, Chris Cowan notifications@github.com wrote:

Does this only break when you add watchify? Do you ever change the build process's current working directory? Is the build process's current working directory (should be the directory that the gulpfile is in) the same directory that your package.json (that lists browserify-hmr as a dependency) is located in? Can you make a small reproducible example?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AgentME/browserify-hmr/issues/33#issuecomment-257050082, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZkuTgG0vLSzK-pl1RDSNk50Oq3AbR1ks5q4oFJgaJpZM4Kj7Q8 .

[mykone]

I'm not home now, so I'll try to create a reproducible project.

On Friday, October 28, 2016, Mykone Saunders mykonesaunders@gmail.com wrote:

1. Watchify has always been in the build config.
2. Don't change build directory.
3. gulpfile.js is in same directory as package.json

The point though is, all the other libraries include fine. So the problem is the reference to HMR on the client side fails. I can see the [HMR] output in the console at build time, and also indicating the listening port. Just the client side is failing.

On Friday, October 28, 2016, Chris Cowan <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

Does this only break when you add watchify? Do you ever change the build process's current working directory? Is the build process's current working directory (should be the directory that the gulpfile is in) the same directory that your package.json (that lists browserify-hmr as a dependency) is located in? Can you make a small reproducible example?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AgentME/browserify-hmr/issues/33#issuecomment-257050082, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZkuTgG0vLSzK-pl1RDSNk50Oq3AbR1ks5q4oFJgaJpZM4Kj7Q8 .