Browser-sync: TypeError: cannot read property 'dataXXXXX' of null

[NateRedding]

Issue details

I am getting the following TypeError in the browser console when running BrowserSync with our project:

Chrome stacktrace:

Uncaught TypeError: Cannot read property 'data1455815651327' of null
getData @ browser-sync-client.2.11.1.js:129
addEvent @ browser-sync-client.2.11.1.js:129
n.init @ browser-sync-client.2.11.1.js:129
n.init @ browser-sync-client.2.11.1.js:129
n.init @ browser-sync-client.2.11.1.js:129
Emitter.emit @ browser-sync-client.2.11.1.js:1
Socket.onevent @ browser-sync-client.2.11.1.js:1
Socket.onpacket @ browser-sync-client.2.11.1.js:1
(anonymous function) @ browser-sync-client.2.11.1.js:1
Emitter.emit @ browser-sync-client.2.11.1.js:1
Manager.ondecoded @ browser-sync-client.2.11.1.js:1
(anonymous function) @ browser-sync-client.2.11.1.js:1
Emitter.emit @ browser-sync-client.2.11.1.js:1
Decoder.add @ browser-sync-client.2.11.1.js:3
Manager.ondata @ browser-sync-client.2.11.1.js:1
(anonymous function) @ browser-sync-client.2.11.1.js:1
Emitter.emit @ browser-sync-client.2.11.1.js:1
Socket.onPacket @ browser-sync-client.2.11.1.js:1
(anonymous function) @ browser-sync-client.2.11.1.js:1
Emitter.emit @ browser-sync-client.2.11.1.js:1
Transport.onPacket @ browser-sync-client.2.11.1.js:1
callback @ browser-sync-client.2.11.1.js:2
(anonymous function) @ browser-sync-client.2.11.1.js:2
exports.decodePayloadAsBinary @ browser-sync-client.2.11.1.js:2
exports.decodePayload @ browser-sync-client.2.11.1.js:2
Polling.onData @ browser-sync-client.2.11.1.js:2
(anonymous function) @ browser-sync-client.2.11.1.js:2
Emitter.emit @ browser-sync-client.2.11.1.js:1
Request.onData @ browser-sync-client.2.11.1.js:2
Request.onLoad @ browser-sync-client.2.11.1.js:2
xhr.onreadystatechange @ browser-sync-client.2.11.1.js:2

Safari stacktrace:

TypeError: null is not an object (evaluating 'n')
getDatabrowser-sync-client.2.11.1.js:128:6154
addEventbrowser-sync-client.2.11.1.js:128:7675
initbrowser-sync-client.2.11.1.js:128:9018
initbrowser-sync-client.2.11.1.js:128:12388
initbrowser-sync-client.2.11.1.js:128:15014
emitbrowser-sync-client.2.11.1.js:1:16414
oneventbrowser-sync-client.2.11.1.js:1:11598
onpacketbrowser-sync-client.2.11.1.js:1:11116
(anonymous function)browser-sync-client.2.11.1.js:1:15045
emitbrowser-sync-client.2.11.1.js:1:16414
ondecodedbrowser-sync-client.2.11.1.js:1:5895
(anonymous function)browser-sync-client.2.11.1.js:1:15045
emitbrowser-sync-client.2.11.1.js:1:16414
addbrowser-sync-client.2.11.1.js:2:11609
ondatabrowser-sync-client.2.11.1.js:1:5833
(anonymous function)browser-sync-client.2.11.1.js:1:15045
emitbrowser-sync-client.2.11.1.js:1:16414
onPacketbrowser-sync-client.2.11.1.js:1:25252
(anonymous function)browser-sync-client.2.11.1.js:1:22153
emitbrowser-sync-client.2.11.1.js:1:16414
onPacketbrowser-sync-client.2.11.1.js:1:30682
callbackbrowser-sync-client.2.11.1.js:1:9198
(anonymous function)browser-sync-client.2.11.1.js:1:26899
forEach
decodePayloadAsBinarybrowser-sync-client.2.11.1.js:1:26871
decodePayloadbrowser-sync-client.2.11.1.js:1:23449
onDatabrowser-sync-client.2.11.1.js:1:9228
(anonymous function)browser-sync-client.2.11.1.js:1:4191
emitbrowser-sync-client.2.11.1.js:1:16414
onDatabrowser-sync-client.2.11.1.js:1:6169
onLoadbrowser-sync-client.2.11.1.js:1:6941
onreadystatechangebrowser-sync-client.2.11.1.js:1:5783

Firefox stacktrace:

TypeError: o is null
[6]</n._ElementCache/this.getData()
 browser-sync-client.2.11.1.js:129
[6]</n._EventManager/this.addEvent()
 browser-sync-client.2.11.1.js:129
[7]</n.init()
 browser-sync-client.2.11.1.js:129
[12]</n.init()
 browser-sync-client.2.11.1.js:129
[15]</n.init()
 browser-sync-client.2.11.1.js:129
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[5]</Socket.prototype.onevent()
 browser-sync-client.2.11.1.js:1
[5]</Socket.prototype.onpacket()
 browser-sync-client.2.11.1.js:1
[8]</module.exports/<()
 browser-sync-client.2.11.1.js:1
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[3]</Manager.prototype.ondecoded()
 browser-sync-client.2.11.1.js:1
[8]</module.exports/<()
 browser-sync-client.2.11.1.js:1
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[44]</Decoder.prototype.add()
 browser-sync-client.2.11.1.js:3
[3]</Manager.prototype.ondata()
 browser-sync-client.2.11.1.js:1
[8]</module.exports/<()
 browser-sync-client.2.11.1.js:1
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[13]</</Socket.prototype.onPacket()
 browser-sync-client.2.11.1.js:1
[13]</</Socket.prototype.setTransport/<()
 browser-sync-client.2.11.1.js:1
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[14]</Transport.prototype.onPacket()
 browser-sync-client.2.11.1.js:1
[18]</Polling.prototype.onData/callback()
 browser-sync-client.2.11.1.js:2
[25]</</exports.decodePayloadAsBinary/<()
 browser-sync-client.2.11.1.js:2
forEach()
 self-hosted:216
[25]</</exports.decodePayloadAsBinary()
 browser-sync-client.2.11.1.js:2
[25]</</exports.decodePayload()
 browser-sync-client.2.11.1.js:2
[18]</Polling.prototype.onData()
 browser-sync-client.2.11.1.js:2
[17]</</XHR.prototype.doPoll/<()
 browser-sync-client.2.11.1.js:2
[9]</Emitter.prototype.emit()
 browser-sync-client.2.11.1.js:1
[17]</</Request.prototype.onData()
 browser-sync-client.2.11.1.js:2
[17]</</Request.prototype.onLoad()
 browser-sync-client.2.11.1.js:2
[17]</</Request.prototype.create/xhr.onreadystatechange()

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

• Browsersync [ 2.11.1 ]
• Node [ 5.4.1 ]
• Npm [ 3.3.12 ]

• Gulp [ 3.9.0 ]

  Affected platforms

• [ ] linux

• [ ] windows
• [x] OS X
• [ ] freebsd
• [ ] solaris

• [ ] other _(please specify which)_

  Browsersync use-case

• [ ] API

• [x] Gulp
• [ ] Grunt
• [ ] CLI
  

  for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

var gulp = require('gulp'),
  browserSync = require('browser-sync'),
  url = require('url'), // npmjs.org/package/url
  proxy = require('proxy-middleware'); // npmjs.org/package/proxy-middleware

var proxyFunc = proxy(url.parse('http://localhost:8080'));

// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:8081
gulp.task('serve', function (done) {
  browserSync({
    online: false,
    open: false,
    port: 8088,
    logLevel: 'debug',
    server: {
      baseDir: ['dev'],
      middleware: function (req, res, next) {
        if (req.url.match(/^\/core\//)) {
          proxyFunc(req, res, next);
        } else {
          res.setHeader('Access-Control-Allow-Origin', '*');
          next();
        }
      }
    }
  }, done);
});

[NateRedding]

We do have another project where we are using BrowserSync with a very similar config that is working properly.

[zachsteffens]

I'm having a similar issue on windows.
stack trace is identical to yours.

Found a related bug, seems to be an issue with jquery
https://github.com/BrowserSync/browser-sync/issues/848

Seems one possible fix is to define angular above jquery.
Dont know if this will cause any issues though. Also, I'm using wiredep to build my dependency tree and inject into my index.html and i cant seem to get jquery to show up below angular.

[NateRedding]

My issue was a silly one... the project that was failing had an 'ng-if' on the body tag such that the page doesn't show anything if there is no user in session. I guess that gets in the way of BrowserSync doing it's things somehow. The other post you pointed me to clued me in to the fact that BrowserSync tries to inject some code into the , which it is unable to do if the does not exist thanks to the 'ng-if'.

I also tried the fix in the other post which tweaks BrowserSync to inject into the as opposed to the body. That fix worked as well, but I feel it was cleaner to just move my 'ng-if' elsewhere.

[jmitch0901]

I had the same error. I fixed it by placing the angular script before the jQuery scipt tag in my index.html file. No idea why this worked.

[porfidev]

If you use Angular Before Jquery... angular will use JQLite instead jQuery.

This is helpfull untill you directive works with Jquery instead jQLite.

[PauloLira]

+1

[mrankitsinghal]

I am also facing same issue. If I move jquery to above angular then it is working fine.. But I am not able to run my jquery script.

Pls let me know if you got the answer of this.

[mateusvelleda]

I think it's something (Angular in your case) handling the DOM and removing the reference that browsersync needs to get DOM data. I've got the same problem once I was testing something with jQuery('body').remove(). Hope it helps.

[SebaSOFT]

See this...

https://github.com/BrowserSync/browser-sync/issues/815

is related to installing angular UI Router