16

I am trying out handlebars and I am using the following simple template for this:

<html>

<head></head>

<body>

    <h1>{{title}}</h1>
    <p>{{body}}</p>

    {{#each list}}
    <ul>
        <li>{{@index}}. {{this}}</li>
    </ul>
    </br>
    {{{htmlTag}}} 

    {{#if user.admin}}
    <button class="launch">Launch Spacecraft</button> {{else}}
    <button class="login"> Log in</button> 
    {{/if}} 
    {{!-- This is a comment --}}

</body>
</html>

My app.js looks like the following:

require('dotenv').config()
const express = require('express')
const logger= require('morgan')
const path = require('path')

const app = express()

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'hbs')
app.use(logger(process.env.LOG_ENV))

app.get('/', (req, res) => {
    const titel = "This is a titel"
    const body = "Lorem ipsum dolor sit amen ..."
    const list = ['apple', 'banana', 'vegetable']
    const htmlTag = '<h2>This is an unescaped Heading</h2>'
    const user = {
    admin: true
  }
    res.render('index',{titel, body, list, htmlTag, user})
})


// Start Server
const port = process.env.APP_PORT || 8080
const host = process.env.APP_URL || '0.0.0.0'

app.listen(port, host, () => {
    console.log(`Listening on ${host}:${port}/`)
})

module.exports = app

When I render the page, I get the following error:

Error: /home/ubuntu/workspace/src/views/index.hbs: Parse error on line 20: ...}} -------------------^ Expecting 'OPEN_INVERSE_CHAIN', 'INVERSE', 'OPEN_ENDBLOCK', got 'EOF' at Object.parseError (/home/ubuntu/workspace/node_modules/handlebars/dist/cjs/handlebars/compiler/parser.js:267:19) at Object.parse (/home/ubuntu/workspace/node_modules/handlebars/dist/cjs/handlebars/compiler/parser.js:336:30) at HandlebarsEnvironment.parse (/home/ubuntu/workspace/node_modules/handlebars/dist/cjs/handlebars/compiler/base.js:46:43) at compileInput (/home/ubuntu/workspace/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:514:19) at ret (/home/ubuntu/workspace/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:523:18) at /home/ubuntu/workspace/node_modules/hbs/lib/hbs.js:63:19 at tryToString (fs.js:456:3) at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:443:12)

Any suggestion what I am doing wrong within my template?

I appreciate your reply!

wscourge
  • 10,657
  • 14
  • 59
  • 80
Carol.Kar
  • 4,581
  • 36
  • 131
  • 264

3 Answers3

44

Error states:

Expecting (...), got EOF

Where:

  1. (...) is what it can possibly expect
  2. EOF is End of File

What you are missing is closing {{/each}}:

{{#each list}}
<ul>
    <li>{{@index}}. {{this}}</li>
</ul>
</br>
{{{htmlTag}}} {{#if user.admin}}
<button class="launch">Launch Spacecraft</button> {{else}}
<button class="login"> Log in</button> {{/if}} {{!-- This is a comment --}}
{{/each}} <!-- HERE -->
wscourge
  • 10,657
  • 14
  • 59
  • 80
5

This is always as a result of not closing either {{each}}, {{if}}, or any other control statements, but it cannot be caused by unclosed html tags like <div>, <p>, or any other html tags.

Adriano
  • 3,788
  • 5
  • 32
  • 53
Krafty Coder
  • 61
  • 1
  • 2
0

this is because you missed closing {{#each}}. add {{/each}} at the end of your loop.

Hanoon IH
  • 1
  • 2