I am trying to use the express-handlebars module but have an error. My code:
var exphbs = require('express-handlebars');
app.engine('.hbs', exphbs({ extname: '.hbs', defaultLayout: "main"}));
app.set('view engine', '.hbs');
My error:
"app.engine('.hbs', exphbs({ extname: '.hbs', defaultLayout: "main"}));
^
TypeError: exphbs is not a function"
I can't seem to figure it out why is it not working properly. Any ideas?
You have two options to solve this
1st Method-
In this you just have to update a single word .enigne
Change this:
app.engine('.hbs', exphbs({ extname: '.hbs', defaultLayout: "main"}));
To
app.engine('.hbs', exphbs.engine({ extname: '.hbs', defaultLayout: "main"}));
2nd Method-
In this, you have to update
var exphbs = require('express-handlebars');
To
const { engine } = require('express-handlebars');
And
app.engine('.hbs', exphbs({ extname: '.hbs', defaultLayout: "main"}));
To
app.engine('handlebars', engine({ extname: '.hbs', defaultLayout: "main"}));
Goodluck
that's right, per documentation from hbs, this option will get the job done.
import express from 'express';
import { engine } from 'express-handlebars';
const app = express();
app.engine('.hbs', engine({extname: '.hbs'}));
app.set('view engine', '.hbs');
app.set('views', './views');
If you want to use express-handlebars with commonJS module you should import it like that:
const express = require('express');
const { engine } = require('express-handlebars');
const app = express();
app.engine('handlebars', engine({ extname: '.hbs', defaultLayout: "main"}));
app.set('view engine', 'handlebars');
app.set("views", "./views");
app.get('/', (req, res) => {
res.render('home');
});
app.listen(3000);
If you want to go with ES6 module, you can follow the official readme
const { engine } = require('express-handlebars');
and
app.engine('handlebars', engine({ extname: '.hbs', defaultLayout: "main"}));
You can use exphbs liabrary instead of express-handlebars.
Registering view engine:
// view engine setup
app.engine('hbs', require('exphbs'));
app.set('view engine', 'hbs');
app.set('view options', { layout: 'main'});
By default,exphbs is looking for a folder name called partials for partials directory and folder name called layouts for layouts directory.Both partials and layouts folders come under views directory.
You should use "exphbs.engine" instead of "exphbs".
app.engine('.hbs', exphbs.engine({ extname: '.hbs', defaultLayout: "main"}));
Replace with this :
"app.engine('.hbs', exphbs({ extname: '.hbs', defaultLayout: "main"}));
^
TypeError: exphbs is not a function"
This error can be resolved by adding a engine() function to the exphbs constant, OR, just calling the engine() function.
exphbs.engine(), because exphbs is a constant not a function, we have to call the engine() function from the express-handlebars package, so that we can use the handlebars templating engine!
You may get a second error if you are not using a Layout (main.handlebars/ main.hbs) file.
If someone is having trouble with the main.handlebars/ main.hbs file error.
You can set the defaultLayout as null.
Something like this:
const expressHbs = require('express-handlebars');
app.engine('handlebars', expressHbs.engine({
layoutsDir: 'views/layouts/',
defaultLayout: null,
extname: 'handlebars'
})
);
app.set('view engine', 'handlebars');
app.set('views', 'views'); // optional
layoutsDiris the location of your layouts (if there is any - this can be omitted if you are not using a layout).
extname(extension name) depends upon the choice of the user!