Uncaught TypeError: Cannot read property 'indexOf' of null

Howdy, I am getting an error when using Browsersync, specifically when I’m using the css style injection feature, I’m following a tutorial. The autoupdate/refresh feature does not work when I change css styles. I rolled back to version 2.12.8. This error does not occur with 2.12.8. TIA.

The error: Uncaught TypeError: Cannot read property 'indexOf' of null

complete error message:

Uncaught TypeError: Cannot read property 'indexOf' of null
   

at Object.e.splitUrl (browser-sync-client.js?v=2.23.6:8)
   

 at Object.e.pathFromUrl (browser-sync-client.js?v=2.23.6:8)
   
 at browser-sync-client.js?v=2.23.6:8
    at browser-sync-client.js?v=2.23.6:8
  
  at Array.forEach (<anonymous>)
 
 at Object.e.pickBestMatch (browser-sync-client.js?v=2.23.6:8)
    
at t.reloadStylesheet (browser-sync-client.js?v=2.23.6:8)
    
at t.reload (browser-sync-client.js?v=2.23.6:8)
   
at r.<anonymous> (browser-sync-client.js?v=2.23.6:8)
    
at r.emit (browser-sync-client.js?v=2.23.6:8)

The version: browser-sync 2.23.6 The OS: win7 64-bit

my gulpfile:

var gulp = require('gulp'),
watch = require('gulp-watch'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
browserSync = require('browser-sync').create();

gulp.task('default', function() {
  console.log("Hooray - you created a Gulp task.");
});

gulp.task('html', function() {
  console.log("Imagine something useful being done to your HTML here.");
});

gulp.task('styles', function() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
    .pipe(gulp.dest('./app/temp/styles'));
});

gulp.task('watch', function() {

  browserSync.init({
    notify: false,
    server: {
      baseDir: "app"
    }
  });

  watch('./app/index.html', function() {
    browserSync.reload();
  });

  watch('./app/assets/styles/**/*.css', function() {
    gulp.start('cssInject');
  });

});

gulp.task('cssInject', ['styles'], function() {
  return gulp.src('./app/temp/styles/styles.css')
    .pipe(browserSync.stream());
});

[arnisjuraga]

I had the same error. Only by debugging I found, that having empty “link” tag is crashing browsersync:

<link rel="stylesheet">

I think, You can easily reproduce this.

[marius-hi]

I confirm what @arnisjuraga described earlier. I’m getting the same error in browser-sync 2.26.7 when having this tag on the page: <link id="templateCss" rel="stylesheet"> I use this tag to dynamically load additional css files in Javascript.

It seems that this was introduced in 2.22.0. As a work around I downgraded to a lower version such as 2.21.0