Browser-sync: Using angular, jquery, browser-sync

Created on 12 Apr 2016 · 10Comments · Source: BrowserSync/browser-sync

Issue details

When using AngularJS, jQuery, and Browser-Sync, the 2.11.2 version works fine. As soon as I updated to 2.12.1, browser started reporting a number of errors, all starting with Uncaught TypeError: Cannot read property 'dataXXXXX' of null from browser-sync-client.2.12.1.js:129.

Steps to reproduce/test case

The project in which this is used is complicated, but we have two projects that branched off the same origin trunk and one had this problem and the other did not. The only difference was the version of BrowserSync and one other dependency, since the two branches were only made days apart. We changed the other dependency and it did not resolve. We changed BrowserSync back to 2.11.2 and it worked fine.

Due to some other issues I read in here, I reversed my dependency order. When AngularJS is loaded first, then jQuery, BrowserSync doesn't have this problem. But, by nature, it is best practice to order jQuery first, so that Angular picks up the full version of jQuery rather than using its built-in jQueryLite.

Hopefully this is helpful to someone in a similar situation. I would prefer to continue to use latest, stable builds of Browser-Sync rather than lock-in at 2.11.2.

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.12.1 ]
Node [ 0.12.10 ]
Npm [ 2.14.9 ]

Affected platforms
[ ] linux
[ ] windows
[ x ] OS X
[ ] freebsd
[ ] solaris
[ ] other _(please specify which)_

Browsersync use-case
[ ] API
[ x ] Gulp
[ ] Grunt
[ ] CLI

Source

frankrue

👍6

Most helpful comment

Thanks everyone for the reports, rest assured I will be fixing this issue
immediately
On Wed, 13 Apr 2016 at 05:26, Elliott Ro [email protected] wrote:

Ditto to having this issue, downgrade to 2.11.2 fixed
Before downgrade

Browsersync [ 2.12.1 ]
Node [ 4.2.1 ]
Npm [ 3.3.8 ]

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/1062#issuecomment-209221428

shakyShane on 13 Apr 2016

😄3

All 10 comments

Same problem here. Newer node version plus Windows.

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.12.1 ]
Node [ 5.10.0 ]
Npm [ 3.8.3 ]

Affected platforms

[ ] linux
[ x] windows
[ ] OS X
[ ] freebsd
[ ] solaris
[ ] other _(please specify which)_

Browsersync use-case

[ ] API
[x ] Gulp
[ ] Grunt
[ ] CLI

nascosto on 12 Apr 2016

I'm also having this problem. Driving me absolutely nuts. Any ideas?

divmgl on 12 Apr 2016

FYI, I had to revert back to an older version of browser-sync in order to get this to work properly.

divmgl on 13 Apr 2016

same error here. it does work if i use 127.0.0.1 though

johnpapa on 13 Apr 2016

Seeing the same issue here. We had to downgrade to 2.11.2 after a day of trying to find out what happened.

bertomaniac on 13 Apr 2016

@johnpapa Dang, that's rough. I've been dead in the water all day. One of my co-workers who hadn't upgraded had to send me his node_modules and I was finally able to track down what had happened.

bertomaniac on 13 Apr 2016

i think it is indeed an issue in 2.12

i was just able to work around it by reverting.

johnpapa on 13 Apr 2016

Ditto to having this issue, downgrade to 2.11.2 fixed the problem

Before downgrade

Browsersync [ 2.12.1 ]
Node [ 4.2.1 ]
Npm [ 3.3.8 ]
OS [ ubuntu 14.04 ]
Use case [ gulp ]

elliottjro on 13 Apr 2016

Thanks everyone for the reports, rest assured I will be fixing this issue
immediately
On Wed, 13 Apr 2016 at 05:26, Elliott Ro [email protected] wrote:

Ditto to having this issue, downgrade to 2.11.2 fixed
Before downgrade

Browsersync [ 2.12.1 ]
Node [ 4.2.1 ]
Npm [ 3.3.8 ]

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/1062#issuecomment-209221428

shakyShane on 13 Apr 2016

😄3

This is still an issue. Node [6.4.0], npm [5.3.0], browsersync[2.18.13] - if you attach any sort of angular behavior to the <body>, I can recreate the issue. I had to use the following code to get this to work, but just seems unnecessary.

gulp.task('browserSync', function () {
    browserSync.init({
        snippetOptions: {
            // Need to inject browserSync script into head instead of body so it runs before app code
            rule: {
                match: /<\/head>/i,
                fn: function (snippet, match) {
                    return snippet + match;
                }
            }
        }
    });
});