Reloading twice in Gulp build

[reintroducing]

Matti, Thanks for this wonderful plugin. I've successfully implemented it in a test environment and it works great except I'm getting a log from a component's render method running twice when I re-save the file. You can grab a minimal test case of it here:

http://dev.reintroducing.com/2015/livereactload-test.zip

Just run npm i after you've unzipped that and then just run gulp. This runs a browser-sync server along with LRL. If you open your console you will see a log for TestComponent. Open that file in /js/components/TestComponents.jsx and re-save it. You will now see two more TestComponent logs in your console.

I can't pinpoint why this is happening. I can't tell if this is an issue with my setup and my Gulp tasks or if it's an issue with LRL. If you have a moment I'd appreciate you taking a look at what I've got going on in the gulp tasks and see if you can pinpoint where my issue is. The task gulp/tasks/default.js is what running gulp runs.

Thank you for any time you can dedicate to this.

[reintroducing]

Quick update.

I was convinced that I was doing something wrong in my build so I set out to reverse engineer based on your examples. I opened and ran 01-basic-usage and to my surprise it's doing the same thing. I put a log into the render method of application.js and the log shows up twice when I save the file.

I made a quick screencast of it that you can view here: http://screencast.com/t/8e5AtLyw

[milankinen]

Thanks for the detailed instructions! I think this issue has the same root cause as #35. Please see https://github.com/milankinen/livereactload/issues/35#issuecomment-112892555 for more details

[reintroducing]

That would make sense.

Just to confirm, are you able to duplicate this in your example code as outlined in my second comment? I just want to make sure it's not just me who's seeing this.

[milankinen]

I can duplicate this occasionally :)

[milankinen]

I just released version 0.6.0. Can you check if this one is fixed or not?

[reintroducing]

Unfortunately in your example I'm still seeing the same issue using the latest. Every once in a while it'll work fine but mostly I'm seeing this after every save:

LiveReactload: sending reload request to 1 clients
LiveReactload: sending reload request to 1 clients
17 Jun 19:28:32 - [nodemon] restarting due to changes...
17 Jun 19:28:32 - [nodemon] starting `node server.js`

[milankinen]

Hmmm, very strange. I'll investigate this issue more during the next weekend.

[duncanmak]

I see this in 0.6.0 as well.

[milankinen]

@duncanmak can you post your gulpfile.js for this one?

[duncanmak]

My sample project is here - https://github.com/duncanmak/experiments/blob/live-reloadable/flux-by-rx/gulpfile.js

[milankinen]

Should be fixed in 2.x.x, closing this if no new comments arrive during the next few days.

[reintroducing]

I just set up the zip file I originally added here, updated it for 2.x version, and tried running gulp. Here is what I'm seeing with v2.0.5:

/Users/mprzybylski/Desktop/livereactload-test/node_modules/livereactload/lib/browserify-plugin/main.js:42
  b.on("reset", addHooks);
    ^
TypeError: undefined is not a function
    at LiveReactloadPlugin (/Users/mprzybylski/Desktop/livereactload-test/node_modules/livereactload/lib/browserify-plugin/main.js:42:5)
    at nr (/Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/module-deps/index.js:289:23)
    at /Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/resolve/lib/async.js:44:21
    at ondir (/Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/resolve/lib/async.js:187:31)
    at /Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/resolve/lib/async.js:153:39
    at onex (/Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/resolve/lib/async.js:93:22)
    at /Users/mprzybylski/Desktop/livereactload-test/node_modules/browserify/node_modules/resolve/lib/async.js:24:18
    at FSReqWrap.oncomplete (fs.js:95:15)

[milankinen]

@reintroducing perhaps you forgot to change the livereactload usage from Browserify transform to plugin?

I downloaded the zip, removed livereactload from package.json's browserify.transform field, removed lrload.monitor line from watch task and modified gulp/tasks/browserify.js line 27 to

_.extend(bundleConfig, watchify.args, {debug: true, plugin: ["livereactload"]});

Got it working. Can you re-produce this?

[reintroducing]

@milankinen Removing the transform from package.json and the lrload.monitor call were the key. I had the plugin in the browserify task as follows:

var b = browserify(bundleConfig);
b.plugin('livereactload');

var bundle = function() {
        bundleLogger.start(bundleConfig.outputName);
...

This works as well. Thanks!

[reintroducing]

Just a quick follow up.

I pared down the "installation" by removing the .babelrc file and removing the react-proxy@1.x babel-plugin-react-transform node modules and everything still worked as expected. What is the purpose of these steps in the installation instructions from the readme? Just curious because, at least in my case, it seems not to be necessary. Am I missing something by removing these files/folders?

[milankinen]

Sorry missed this one!

react-proxy and babel-react-transform are needed to preserve the state of your React components. If you have used e.g. setState, then that state is lost after the reload without those components.

[reintroducing]

gotcha, thanks for the explanation, appreciate it.