Express Handlebars Migration – 5.3.4 to 6.0.2
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
More Resources:
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
what would change in my case?
exphbs.create({
layoutsDir: resolve(viewPath, ‘layouts’),
partialsDir: resolve(viewPath, ‘partials’),
defaultLayout: ‘default’,
extname: ‘.hbs’,
}),
viewPath,
extName: ‘.hbs’,
})
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.
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’,
});
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