38

I'm making an Express based web application and everytime someone visits this jade file i get the following error:

Warning: missing space before text for line 28 of jade file "C:\x\app\view
s\login.jade"

It also spits it out a few times for each line it happens on.

I took a look at these lines and I can not figure out what it's complaining about.

My jade file is as follows:

doctype html
html
    head
        meta(charset='utf-8')
        link(href='style.css', rel='stylesheet')
    body
        .wrapper
            header.header
                a(href="/", style="color: #000000;")
                    h1(style="position: absolute; top: 30px;") Hello
            .middle
                .container
                    main.stream
                        p Login
                    main.name
                        form(id="login",    method="POST", action="/login")
                            table(cellspacing="15")
                                tr
                                    td Email
                                    td
                                        input(type='email', name='email' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;")
                                tr
                                    td Password
                                    td
                                        input(type='password', name='password' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;")
                                tr
                                    td
                                        input(style="width:75px;height:30px;", type="submit", value="Login")    

                aside.left-sidebar
                    main.dir
                        a(href="/") Home
                    main.dir
                        a(href="/signup")   Register                        
        footer.footer
            h3 Hello
            p This is a footer
novs12
  • 657
  • 2
  • 7
  • 15
  • I don't think it's a big deal, but you use a mix of commas and no commas in your element syntax. `input(type='password', name='password' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;")` vs `input(style="width:75px;height:30px;", type="submit", value="Login")` – Wayne Pincence Mar 14 '14 at 15:42
  • @WaynePincence Indeed, I have no idea how I didn't catch that, thanks! – novs12 Mar 18 '14 at 08:39

6 Answers6

46

In Jade use | when start with only text

wrong ->

td
  {{anything}}
  br
  Hello

correct ->

td
  | {{anything}}
  br
  | Hello
Jesus
  • 752
  • 7
  • 5
  • 1
    **One thing to add:** If you have a block of script starting with `script.` then the reported line for the problem will be wrong: all lines of such script are not counted! – ishahak Jun 30 '16 at 04:33
  • Thanks for that @ishahak! I had a feeling the line numbers were not matching up, as it was giving me this error on a blank line. A bit of careful counting led me to the problem. – MindJuice Mar 20 '17 at 22:59
24

I got this error when using the !{} syntax and had an extra return:

.row 
  !{marked(val)}

should be: 

.row !{marked(val)}
Christian Landgren
  • 13,127
  • 6
  • 35
  • 31
  • Yes, I also had this error with a script tag containing only one line of javascript indented afterwards. Seems you have to put it on the same line. Thanks - your tip solved it for me. – scipilot Jul 18 '15 at 08:26
11

Why this problem occurs even when all of your jade seems valid is highlighted in this github issue. Quoting from the original issue itself:

The warning is because !{} and #{} are for interpolation within text. i.e. you have to be in(side) a text (block) to start with. You should use = and != to buffer JavaScript expressions.

This means that the !{} and #{} are only to be used if you are interpolating within an existing text-block. Something like coffee-script's #{} interpolation here:

a = "Hi #{name}!"

translates to (in javascript)

a = "Hi " + name + "!";

Thus, in Jade too, you'll use the !{} and !{} within a running text (a paragraph or a string). To just output a string from a variable without explicitly starting a new text-block, you'd use = or !=.

.row
  != marked(val)
.another-row
  = marked(val)

An alternative would be to explicitly start a new text-block as so:

.row 
  | !{marked(val)}

.another-row 
  | #{marked(val)}
kumarharsh
  • 18,961
  • 8
  • 72
  • 100
  • This is the best answer because it explains why Jade behaves like that. – Suzana Oct 14 '16 at 11:29
  • I have no idea how this relates to the code in question, or where a missing space figures in. – Drazen Bjelovuk Apr 21 '17 at 16:54
  • @DrazenBjelovuk a newline starts a new block, and interpolation doesn't work the way you'd expect it to. Although the question doesn't have this scenario, the *same* error was thrown by jade for wrong interpolation, which this answer tries to explain. If you follow the link to the github issue, you'd get a little more info on this. – kumarharsh Apr 24 '17 at 14:25
3

I took your code and copied into Notepad++ with View Whitespace on.

Line 28 has 4 extra spaces at the end of it (shown as dashes here):

input(style="width:75px;height:30px;", type="submit", value="Login")----

Also, line 34 has several extra spaces after "Register" as well.

Wayne Pincence
  • 199
  • 11
1

this may also be caused by using tabs instead of spaces

div(attr="val")[\t]text

or by \t characters at the ends of lines

Merlyn Morgan-Graham
  • 58,163
  • 16
  • 128
  • 183
Jascha Ehrenreich
  • 557
  • 5
  • 18
0

Alternatively you cna have this problem if you have you something like this..

\t \t p    Foo
\t \t p \t Foo

I have had the above answer also generate this error so we're both technically right. ;)

Also, if you use vim. You can see spaces by doing,

:set hlsearch
/ /
Evan Carroll
  • 78,363
  • 46
  • 261
  • 468