Raddy Website Design & Development Tutorials

Express Handlebars Migration – 5.3.4 to 6.0.2

By Raddy in NodeJs ·

In this short article I want to show you how you can upgrade from Handlebards 5.x.x to 6.x.x using “require” instead of “import”.

As of 25/11/2021 Express Handlebars is currently on version 6.0.2 which might give you an error if you followed one of my Node.Js – Express Handlebars tutorials. This is unfortunate as I can’t update the videos that I have published on YouTube and this is why I am making this super quick article update.

If you want to use “import” instead of required follow the official documentation here. I am just trying to keep everything consistent as I’ve used require on all videos and “import” requires a few extra steps.

1) Error

Okay, so you might be getting the following error in the terminal:

“exphbs is not a function referencing the code line ” app.engine(‘hbs’, exhbs({extname : ‘.hbs’})”

2) Fix

What we have to do is update our templating engine code. I am going to use “require” in this case so we can stay consistent.

// Require Express Handlebars
const exphbs = require('express-handlebars');

// Set Templating Engine
const handlebars = exphbs.create({ extname: '.hbs',});
app.engine('.hbs', handlebars.engine);
app.set('view engine', '.hbs');

Your “app.js” code might look something like this, depending on your project of course. This is just a simple demo:

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

const app = express();
const port = process.env.PORT || 5000;
require('dotenv').config();

// Parsing middleware
app.use(express.urlencoded({extended: true})); // New
app.use(express.json()); // New
app.use(express.static('public'));

// Templating Engine
const handlebars = exphbs.create({ extname: '.hbs',});
app.engine('.hbs', handlebars.engine);
app.set('view engine', '.hbs');

const routes = require('./server/routes/main.js');
app.use('/', routes);

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

That’s all.

If you wound this useful, please consider subscribing to my YouTube channel. I post Web Design & Development tutorials. Thank you for being here!

Credit Cover Photo:

Photo by Todd Trapani on Unsplash

Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!

  1. Henrique says:

    what would change in my case?

    exphbs.create({
    layoutsDir: resolve(viewPath, ‘layouts’),
    partialsDir: resolve(viewPath, ‘partials’),
    defaultLayout: ‘default’,
    extname: ‘.hbs’,
    }),
    viewPath,
    extName: ‘.hbs’,
    })

    1. Raddy says:

      Probably all of it to be honest. You can use the example from my code to get it to work and then everything else can be found in the official documentation.

    2. Xavier says:

      you can do like this
      import { create } from ‘express-handlebars’;

      const exphbs = create({
      layoutsDir: resolve(viewPath, ‘layouts’),
      partialsDir: resolve(viewPath, ‘partials’),
      defaultLayout: ‘default’,
      extname: ‘.hbs’,
      });

      1. Raddy says:

        I’ve used “require” on the project, so he might have to update a few things, but that looks good. Thank you for sharing Xavier

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.