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

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

Gulp Setup

  • Exporting a class with ES6 (Babel)
  • Override browserify require()
  • How to browserify an AngularJS project with multiple SPAs
  • Keep original typescript source maps after using browserify
  • Using watchify with babelify
  • Babelify throws ParseError on import a module from node_modules
  • 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' } } ]
    

  • does it make sense to browserify polymer elements` js?
  • Browserify dynamic separate bundles
  • make some operations on factor-bundle's partial bundles
  • How to use webtorrent in browser?
  • Accessing “public” members after bundling with browserify or webpack
  • Browserify vs Usemin
  • One Solution collect form web for “Node Jade Unexpected character # expected ` `, `\n`, `,`, `!` or `=`”

    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.