25

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?

1
  • import {engine} instead of exphbs Nov 17, 2021 at 9:59

8 Answers 8

49

You should use "exphbs.engine" instead of "exphbs".

app.engine('.hbs', exphbs.engine({ extname: '.hbs', defaultLayout: "main"}));
2
  • this worked for me as well, but I wonder if somebody who knows would be so kind as to further explain the reasoning? I seems like 'engine' is a method of the object exported by require('express-handlebars')? If so, does destructuring with an import ( ie import { engine} = ... ) achieve the same effective result? All the tutorials I've seen do not include the engine method in their examples
    – kdub1312
    Jul 4, 2022 at 3:30
  • 1
    That works. I wonder how you knew that? Jul 26, 2022 at 13:41
16

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

6

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

5
"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!

express-handlebars usage guide


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

layoutsDir is 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!

4

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');
3
  1. var exphbs = require("express-handlebars");
  2. app.engine("handlebars",exphbs({ defaultLayout: "main" }));

Replace with this :

  1. const { engine } = require("express-handlebars");
  2. app.engine("handlebars", engine({ defaultLayout: "main" }));
1
  • It would be helpful if you could explain why the changes solves the problem
    – MrToast
    Dec 1, 2021 at 7:24
3

Use it like this as per the express-handlebars documentation

const expressHbs = require('express-handlebars');

app.engine('handlebars', expressHbs.engine({
    layoutsDir: 'views/', // directory to handlebars files
    defaultLayout: null,
    extname: 'handlebars'
  })
);

app.set('view engine', 'handlebars');
app.set('views', 'views');    // optional
2
const { engine } = require('express-handlebars');

and

app.engine('handlebars', engine({ extname: '.hbs', defaultLayout: "main"}));

Not the answer you're looking for? Browse other questions tagged or ask your own question.