Browser-sync: Uncaught SyntaxError: Unexpected token \

Created on 21 Apr 2015 · 4Comments · Source: BrowserSync/browser-sync

It appears that Chrome is unhappy about an escape slash in the browser-sync CDATA tag, and doesn't load any subsequent JS files. This is happening with browser-sync@latest and proxy enabled for Express server pass through.

The only thing that looks suspect to me is the escaping slash in the document.write script end tag, but here's most of my HTML head. Note, I'm using React, so perhaps its something to do with the way React generates other script tags?

<html data-reactid=".ls0ob2jxts" data-react-checksum="-1054006221"><head lang="en" data-reactid=".ls0ob2jxts.0"><title data-reactid=".ls0ob2jxts.0.0">xxx</title><meta charset="UTF-8" data-reactid=".ls0ob2jxts.0.1"><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" data-reactid=".ls0ob2jxts.0.2"><meta http-equiv="Content-Language" content="en-us" data-reactid=".ls0ob2jxts.0.3"><meta http-equiv="X-UA-Compatible" content="IE=Edge" data-reactid=".ls0ob2jxts.0.4"><link rel="canonical" href="" data-reactid=".ls0ob2jxts.0.5"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" data-reactid=".ls0ob2jxts.0.6"><meta name="apple-mobile-web-app-capable" content="yes" data-reactid=".ls0ob2jxts.0.7"><meta name="mobile-web-app-capable" content="yes" data-reactid=".ls0ob2jxts.0.8"><meta name="robots" content="follow" data-reactid=".ls0ob2jxts.0.9"><meta name="description" content="" data-reactid=".ls0ob2jxts.0.a"><meta name="keywords" content="" data-reactid=".ls0ob2jxts.0.b"><link href="https://plus.google.com/u/1/b/" rel="publisher" data-reactid=".ls0ob2jxts.0.c"><meta name="msvalidate.01" content="" data-reactid=".ls0ob2jxts.0.d"><link rel="stylesheet" href="/dist/css/app.css" data-reactid=".ls0ob2jxts.0.e"><script type="text/javascript" src="//use.typekit.net/xxx.js" data-reactid=".ls0ob2jxts.0.f"></script><script type="text/javascript" data-reactid=".ls0ob2jxts.0.g">try{Typekit.load();}catch(e) {}</script></head><body data-reactid=".ls0ob2jxts.1"><script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.6.4.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

The script end escape <\/script> is the first backslash in the document and it's highlighted by the Chrome resources validator.

Here's my gulp task.

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

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        port: 3001,
        proxy: "localhost"
    });
});

Any ideas?

Source

adjavaherian

Most helpful comment

If anyone is looking for the fix this worked for me. in browser-sync/client/dist this piece of code was not commented correctly. It is missing the opening forward slash.

/ *!

The buffer module from node.js, for the browser.
*
@author Feross Aboukhadijeh feross@feross.org http://feross.org
@license MIT
*/

Talhah on 17 Jan 2018

👍2

All 4 comments

@adjavaherian Did you ever resolve this issue? I am experiencing the same issue.

a-b-r-o-w-n on 18 May 2015

Is anyone else finds this - it was because my own JavaScript was doing some weird stuff:

var PERMANENT_URL_PREFIX = window.location.href.split('/index.html')[0] + '/'

I changed it to

var PERMANENT_URL_PREFIX = window.location.origin + window.location.pathname;

and it works

wesbos on 25 Sep 2015

I had a similar problem. It happened when I reinstalled node_modules. I upgraded browser-sync but got an old version if I used chrome (apparently cached version). I cleared the cache and it worked fine.

ivitivan on 24 Nov 2015

👍1

If anyone is looking for the fix this worked for me. in browser-sync/client/dist this piece of code was not commented correctly. It is missing the opening forward slash.

/ *!