Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using angular, jquery, browser-sync

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Reactions:6
Comments:10 (1 by maintainers)

Top GitHub Comments

3reactions

shakyShanecommented, Apr 13, 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 notifications@github.com 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

0reactions

danallen88commented, Aug 22, 2017

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;
                }
            }
        }
    });
});