Browser-sync: Uncaught TypeError: Cannot read property 'data1441826693707' of null

[samundrak]

I am getting strange problem after while using browser sync with gulpjs on expressjs , as i am using it with nodemon . also there is extra error message on browser console
Uncaught TypeError: Cannot read property 'nodeType' of null?
my whole page blank though all necessary file has been loaded?

[shinnn]

https://github.com/BrowserSync/browser-sync/blob/f8c6a0ae33a1150a3cc7c4844a9dc1f8a6ba7407/CONTRIBUTING.md#-got-a-question-or-problem
https://github.com/BrowserSync/browser-sync/blob/f8c6a0ae33a1150a3cc7c4844a9dc1f8a6ba7407/CONTRIBUTING.md#-tips-for-a-creating-a-great-issue-report

[samundrak]

I am on Ubuntu 14, I am using browserSync with my Expressjs project and build system is gulp.
i am also proxying my own server . Whenever i open in browser there are two error and nothing is shown on browser
1

My Gulpfile.js is

    'use strict';

    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    var nodemon = require('gulp-nodemon');

    // we'd need a slight delay to reload browsers
    // connected to browser-sync after restarting nodemon
    var BROWSER_SYNC_RELOAD_DELAY = 500;

    gulp.task('nodemon', function (cb) {
      var called = false;
      return nodemon({

        // nodemon our expressjs server
        script: 'app.js',

        // watch core server file(s) that require server restart on change
        watch: ['app.js']
      })
        .on('start', function onStart() {
          // ensure start only got called once
          if (!called) { cb(); }
          called = true;
        })
        .on('restart', function onRestart() {
          // reload connected browsers after a slight delay
          setTimeout(function reload() {
            browserSync.reload({
              stream: false   //
            });
          }, BROWSER_SYNC_RELOAD_DELAY);
        });
    });

    gulp.task('browser-sync', ['nodemon'], function () {

      // for more browser-sync config options: http://www.browsersync.io/docs/options/
      browserSync.init({

        // watch the following files; changes will be injected (css & images) or cause browser to refresh
        files: ['public/**/*.*'],

        // informs browser-sync to proxy our expressjs app which would run at the following location
        proxy: 'http://localhost:4545',

        // informs browser-sync to use the following port for the proxied app
        // notice that the default port is 3000, which would clash with our expressjs
        port: 4000,

        // open the proxied app in chrome
        browser: ['google-chrome'],
        logPrefix: "VDiscover Project"
      });
    });

gulp.task('default', ['browser-sync']);

[shakyShane]

Please reproduce in a small sample project so that we can help you further :)

[0xorial]

weirdly, I got such message after adding ui-router to my angular project.

[jeffstahlin]

Has anyone managed to find a solution to this issue? I've just run into this myself.

[OmarIthawi]

Adding this rules fixes this issue for me:

  browserSync({
    snippetOptions: {
      rule: {
        match: /<\/head>/i,
        fn: function (snippet, match) {
          return snippet + match;
        }
      }
    }
  });

[handijk]

i just ran to this issue when defining a state on the ui router with templateUrl containing a html template.
Easy to miss and the error is not so descriptive.