Express app gives an unexpected output while using partials

Question

I am learning express and using partials and getting this error.

const express = require("express");
const app = express();
const path = require("path");
const hbs = require("hbs");
// const staticPath = path.join(__dirname, "../public");
const partialsPath = path.join(__dirname, "../views/partials");

app.set("view engine", "hbs");

hbs.registerPartial(partialsPath);
// app.use(express.static(staticPath));

app.get("/", (req, res) => {
  res.render("index", {
    name: "Dhruvan",
  });
});
app.get("/about", (req, res) => {
  res.send("You are on the About Page");
});
app.get("*", (req, res) => {
  res.send("Oops Nothing found");
});
app.listen(8000, () => {
  console.log("listing the port at 8000");
});

Error :

D:\Projects\Portfolio\node_modules\handlebars\dist\cjs\handlebars\base.js:80
        throw new _exception2['default']('Attempting to register a partial called "' + name + '" as undefined');
        ^
Error: Attempting to register a partial called "D:\Projects\Portfolio\views\partials" as undefined
    at HandlebarsEnvironment.registerPartial (D:\Projects\Portfolio\node_modules\handlebars\dist\cjs\handlebars\base.js:80:15)
    at Instance.registerPartial (D:\Projects\Portfolio\node_modules\hbs\lib\hbs.js:222:35)
    at Object.<anonymous> (D:\Projects\Portfolio\routes\index.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  description: undefined,
  fileName: undefined,
  lineNumber: undefined,
  endLineNumber: undefined,
  number: undefined
}
[nodemon] app crashed - waiting for file changes before starting...

Folder Structure :

>Portfolio
    >node_modules
        >...
    >public
        >css
            .style.css
        >js
    >routes
        >index.js
    >views
        >partials
            .nav_bar.hbs
            .footer.hbs
        .about.hbs
        .index.hbs
    .package-lock.json
    .package.json

I have to extend the lines ->
Integer at libero tempor, rhoncus eros eu, viverra ligula. Quisque a turpis ipsum. Aenean vel lacinia lectus, a hendrerit urna. Sed lorem massa, tristique non ullamcorper vel, dictum a ex. Vivamus semper lectus elit, iaculis dictum lorem posuere vel. Suspendisse egestas faucibus odio non vulputate. Vivamus maximus eros a nisi varius condimentum. Mauris lobortis justo sed maximus dapibus. Nam et dignissim diam, maximus vulputate enim. Vivamus blandit ligula at sapien elementum, eget eleifend sapien condimentum. Etiam bibendum libero eu orci vulputate, at porta arcu mollis. Curabitur placerat elementum ultricies. Mauris vel tellus sem. Nam neque odio, vehicula ac libero nec, tempor ullamcorper urna. Morbi neque velit, finibus at dolor ut, pellentesque efficitur sapien.

Fusce at sem eu leo mollis condimentum. Sed aliquet magna diam, a lacinia nisl malesuada ac. Duis scelerisque orci eget nisi rhoncus, at laoreet tortor cursus. Praesent molestie volutpat tincidunt. Aliquam malesuada porta quam, non faucibus ex tempus a. Phasellus in metus vestibulum, porttitor justo in, posuere est. Integer sed dui id sapien rhoncus pretium vitae nec ante. Nulla mollis sit amet tortor quis varius.

`console.log` `partialsPath` is it pointing to right directory? — Ankush Dogra, Jul 10 '21 at 13:15
Is it even possible to register a partials directory like that? It used to be you had to iterate directory files and register each one. — Dave Newton, Jul 10 '21 at 13:24
It appears to me that `hbs.registerPartial()` does not accept a directory or even a filename. It takes either a single (name, partialString) or an object of `name: string` pairs. See doc [here](https://handlebarsjs.com/api-reference/runtime.html#handlebars-registerpartial-name-partial). — jfriend00, Jul 10 '21 at 16:52

jfriend00 · Answer 1 · 2021-07-10T17:07:33.160

This API is not for loading partials from a directory. That's not what it does. It is lower level than that.

hbs.registerPartial(partialsPath); does not accept a directory. It accepts name/templateStr pairs (one or more).

It takes either a single (name, partialString) to register a single partial and associate a name with it.

Handlebars.registerPartial("foo", partialString);

Or, it accepts an object of name: path pairs as in:

Handlebars.registerPartial({ 
   foo: partialStr1, 
   bar: partialStr2 
});

In some cases (depending upon how you've loaded the handlebars library), the partials may need to be already compiled. Details are specified in the doc.

Solution

Instead, you probably want to pass the partialsDir to the handlebars initialization function as shown in the express-handlebars doc and also in these examples here and here.

app.engine('.hbs', exphbs({
   extname: '.hbs'
   layoutsDir: layoutsDir
   partialsDir: partialsDir
}));

Express app gives an unexpected output while using partials

1 Answers1