Node Jade Unexpected character # expected ` `, `\n`, `,`, `!` or `=`

Question

I am using jadeify with browserify to use jade templates in my frontend.

Gulp Setup

gulp.task('browserify', function () {
    var bundler = browserify({entries: ['./frontend/js/app.js']});
    var bundle = function () {
        return bundler
            .transform(jadeify)
            .bundle()
            .pipe(source('app.js'))
            .pipe(gulp.dest('./public/js'))
    };
    if (global.isWatching) {
        bundler = watchify(bundler);
        bundler.on('update', bundle);
    }
    return bundle();
});

The jade file

.header
   h1 Login
.content
   div
      input(placeholder="Username", name="uname", type="text")
      input(placeholder="Password", name="pword", type="password")
.footer
   a(href="/signup")
      span Create an Account

require for the jade file

require('../../views/index.jade')({jamie:'hello'})

Output inside app.js

module.exports = function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;

buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input     placeholder=\"Username\" name=\"uname\" type=\"text\"/><input placeholder=\"Password\" name=\"pword\"     type=\"password\"/></div></div><div class=\"footer\"><a href=\"/signup\"><span>Create an     Account</span></a></div>");;return buf.join("");    };

Everything is good

Error from gulp when changing anything in the jade file

[14:36:14] gulp-notify: [Compile Error] C:\var\www\mywarhammer.co.uk\frontend\views\index.jade:8
6| var jade_interp;
7|
> 8| buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" the an Account</span></a></div>");;return buf.join("");
9| };

Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\index.jade

How can I stop this breaking?

Edit

I have since added more output from gulp-notify on these errors... They actually don't help me a whole lot. It seems to me that they are coming from the original jade file :/

Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade
[ { [Error: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade:8
      6| var jade_interp;
      7|
    > 8| buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" type=\"text\"/>
ate an Account " + (jade.escape((jade_interp = locals.jamie) == null ? '' : jade_interp)) + "</span></a></div>");;return buf.join("");
      9| };

  Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\home.jade]
    path: 'C:\\var\\www\\mywarhammer.co.uk\\frontend\\views\\home.jade',
    filename: 'C:\\var\\www\\mywarhammer.co.uk\\frontend\\views\\home.jade',
    stream:
     { _readableState: [Object],
       readable: true,
       domain: null,
       _events: [Object],
       _maxListeners: 10,
       _writableState: [Object],
       writable: true,
       allowHalfOpen: true,
       _options: [Object],
       _wrapOptions: [Object],
       _streams: [Object],
       length: 1,
       label: 'deps' } } ]

Answer 1

Try changing the escaped quotes in

buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" type=\"text\"/><input placeholder=\"Password\" name=\"pword\" type=\"password\"/></div></div><div class=\"footer\"><a href=\"/signup\"><span>Create an Account</span></a></div>");

to

buf.push("<div class='header'><h1>Login</h1></div><div class='content'><div><input placeholder='Username' name='uname' type='text'/><input placeholder='Password' name='pword' type='password'/></div></div><div class='footer'><a href='/signup'><span>Create an Account</span></a></div>");

because the string is probably passing through two different parsers - the first one interprets \" as ", and the second one gets confused.