Uncaught TypeError: Cannot read property 'indexOf' of null

[magusprow]

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

[shakyShane]

You don't need the gulp-watch package in this case, better to let Browsersync handle the files

change your watch task to

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

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        },
        files: [
            './app/index.html',
            './app/assets/styles/**/*.css'
        ]
    });
});

and also you can remove the cssInject task altogether

[tonywei92]

Anyone? I encountered this problem too. im using wordpress 4.9 on vagrant ubuntu and nodejs on windows environment.

[mad99]

Have same problem. OS: OS X 10.11.6 (15G19009) Browser: Only in Google Chrome 65.0.3325.181 (Offizieller Build) (64-Bit) Works fine in Firefox, Firefox Developer Edition, Safari, and Opera without. But in Google Chrome have got the similar error-throwing:

browser-sync-client.js?v=2.23.6:8 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)
e.splitUrl @ browser-sync-client.js?v=2.23.6:8
e.pathFromUrl @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
e.pickBestMatch @ browser-sync-client.js?v=2.23.6:8
t.reloadStylesheet @ browser-sync-client.js?v=2.23.6:8
t.reload @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
r.emit @ browser-sync-client.js?v=2.23.6:8
r.onevent @ browser-sync-client.js?v=2.23.6:8
r.onpacket @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
r.emit @ browser-sync-client.js?v=2.23.6:8
r.ondecoded @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
r.emit @ browser-sync-client.js?v=2.23.6:8
s.add @ browser-sync-client.js?v=2.23.6:8
r.ondata @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
r.emit @ browser-sync-client.js?v=2.23.6:8
r.onPacket @ browser-sync-client.js?v=2.23.6:8
(anonymous) @ browser-sync-client.js?v=2.23.6:8
r.emit @ browser-sync-client.js?v=2.23.6:8
r.onPacket @ browser-sync-client.js?v=2.23.6:8
r.onData @ browser-sync-client.js?v=2.23.6:8
ws.onmessage @ browser-sync-client.js?v=2.23.6:8

Any ideas, what we could change maybe in the options from browser-sync? Thanks

[shakyShane]

OK I'm trying to replicate this - can someone provide a minimal example showing the bug? or at least a more detailed explanation of when it occurs (eg: which css files are on the page)

[GallardoCode]

I am using yeoman generator-webapp to scaffold a project and I can't inject css to Chrome 68 64bit version on windows 10. https://github.com/yeoman/generator-webapp. Not using sass, bootstarp or modernizr or any bower installations. All tasks work except the styles one

  return gulp.src('app/styles/*.css')
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.if(dev, $.sourcemaps.write()))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

My server task

  runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => {
    browserSync.init({
      notify: false,
      port: 8000,
      server: {
        baseDir: ['./.tmp/', './app/'],
        routes: {
          '/bower_components': 'bower_components'
        }
      }
    });

    gulp.watch([
      'app/*.html',
      'app/images/**/*',
      '.tmp/fonts/**/*'
    ]).on('change', reload);

    gulp.watch('app/styles/**/*.css', ['styles']);
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/fonts/**/*', ['fonts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
  });
});

    at Object.e.splitUrl (browser-sync-client.js?v=2.24.7:9)
    at Object.e.pathFromUrl (browser-sync-client.js?v=2.24.7:9)
    at browser-sync-client.js?v=2.24.7:9
    at browser-sync-client.js?v=2.24.7:9
    at Array.forEach (<anonymous>)
    at Object.e.pickBestMatch (browser-sync-client.js?v=2.24.7:9)
    at T (browser-sync-client.js?v=2.24.7:9)
    at browser-sync-client.js?v=2.24.7:9
    at e.project (browser-sync-client.js?v=2.24.7:9)
    at e._tryNext (browser-sync-client.js?v=2.24.7:9)

Rolling back to 2.12.8

[CodeWithOz]

@GallardoCode did rolling back fix the issue for you? I used the same yeoman generator with a similar configuration to yours. I've rolled back but it's still not working. The indexOf error is no longer being printed to the console but it seems Browsersync isn't working at all, not even with HTML or JS files.

[anandkkpr]

For those who find this issue... I've rolled back browser-sync to v2.20.0 and the issue has fixed itself. This should help as a workaround for now.

[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

[duzun]

Any news on this issue?

A browser extension is introducing something like <link id="templateCss" rel="stylesheet"> to all pages, thus breaking browser-sync for me :( I'm disabling that extension when I need browser-sync, but it is annoying.

[eablokker]

Same, my dark mode Chrome extension was added empty link tags to every page. Disabling extension fixed Browsersync.