Expressjs, Handlebars(hbs), express-messages, flash-connect. Not able to render flash messages

I’m doing an express app and I’d like to show flash messages when a user registers using a form.

The technologies that I’m using are Node.js, Express.js, Handlebars(hbs), connect-flash and express-messages.

In order to be easier to find the error, I’ve created a new app in the simplest way that I could.

The error is:
Error: /Applications/MAMP/htdocs/hbs-simple/views/index.hbs: Parse error on line 7:
...</head><body> {{{messages()}}} {{{b
---------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'

Project structure:

├── app.js
├── package.json
└── _views
    ├── index.hbs
    ├── layout.hbs
    └── test.hbs

app.js:

const express = require('express');
const app = express();
const path = require('path');
const session = require('express-session');
const flash = require('connect-flash');
const hbs = require('hbs');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(require('connect-flash')());
app.use((req, res, next) => {
  res.locals.messages = require('express-messages')(req, res);
  next();
});

// Handle Sessions
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}));

app.get('/', (req, res, next) => {
  req.flash('success', 'Rendering index...');
  res.render('index');
});

app.get('/test', (req, res, next) => {
  req.flash('success', 'Rendering test...');
  res.render('test');
});

app.listen(3000, function () {
  console.log('Listening on port 3000!');
});

layout.hbs

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  {{{messages()}}}
  {{{body}}}
  <a href="/">index</a>
  <a href="/test">test</a>
</body>
</html>

index.hbs

<h3>This is the index</h3>

test.hbs

<h3>This is the index</h3>

package.json

{
  "name": "hbs-simple",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Rafa",
  "license": "ISC",
  "dependencies": {
    "connect-flash": "^0.1.1",
    "express": "^4.15.3",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.3",
    "hbs": "^4.0.1",
    "path": "^0.12.7"
  }
}

This is from the express-messages documentation that you can find on [https://github.com/expressjs/express-messages][1]

Rendering Messages

Call the messages() function as specified by your rendering engine:

EJS:

<%- messages() %>
Jade:

!= messages()

Which using hbs should be {{{messages}}} , but this doesnt work as I expected.

Any ideas or any solution for this situation.

Thanks a lot!


Source: stackoverflow-javascript