Error: the partial navbar could not be found

Question

I have a hbs partial file for my navbar that i want to call in other hbs files. but i am facing an issue in the output.

the error message i get is

Error: C:\Users\Admin\node-mysql\views\homepage.hbs: The partial navbar could not be found
    at Object.invokePartial (C:\Users\Admin\node-mysql\node_modules\handlebars\dist\cjs\handlebars\runtime.js:332:11)
    at Object.invokePartialWrapper [as invokePartial] (C:\Users\Admin\node-mysql\node_modules\handlebars\dist\cjs\handlebars\runtime.js:84:39)
    at Object.eval [as main] (eval at createFunctionContext (C:\Users\Admin\node-mysql\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:262:23), <anonymous>:10:31)
    at main (C:\Users\Admin\node-mysql\node_modules\handlebars\dist\cjs\handlebars\runtime.js:208:32)
    at ret (C:\Users\Admin\Desktop\node-mysql\node_modules\handlebars\dist\cjs\handlebars\runtime.js:212:12)
    at ret (C:\Users\Admin\node-mysql\node_modules\handlebars\dist\cjs\handlebars\compiler\compiler.js:519:21)
    at C:\Users\Admin\node-mysql\node_modules\hbs\lib\hbs.js:93:19
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)

my homepage.hbs is

{{>navbar}}

_navbar.hbs is

<style>
  h1{
    color: white;
    text-align: center;
    text-shadow: tomato;
  }
</style>

<h1>this is navbar</h1>

and app.js is

const express = require("express");
const mysql = require("mysql");
const dotenv = require("dotenv");
const path = require("path")
const hbs = require("hbs");  
dotenv.config({path: './.env'});

const app = express();

const db = mysql.createConnection({
  host: process.env.DATABASE_HOST,
  user: process.env.DATABASE_USER,
  password: process.env.DATABASE_PASSWORD,
  database: process.env.DATABASE
});

//db connection
db.connect((error)=>{
  if(error){
    console.log(error)
  }else{
    console.log("Mysql php connected")
  }
})

//static files
const publicDirectory = path.join(__dirname,'./public');
app.use(express.static(publicDirectory));
app.use(express.urlencoded({extended: false}));
app.use(express.json());

const partialsPath = path.join(__dirname, '/views/partials');
console.log(partialsPath);
hbs.registerPartials(partialsPath);
app.set('view engine','hbs');

//image route
app.use("/images", express.static(path.join(__dirname, "/public/images")));

//define routes
app.use('/', require('./routes/pages'))
app.use('/auth', require('./routes/auth'))

//output on port
app.listen(3000,()=>{
  console.log("server started on port 3000");
})

For context, my project layout is

views
-- partials
-- _navbar.hbs
dashboard.hbs

app.js

i tried adding console logs to check the path of the partials directory and the path is correct. i still get the same error. if i remove the {{> navbar}} the pages are being rendered properly

Answer 1

Your partial filename is named "_navbar.hbs", so therefore, hbs registers your partial as _navbar instead, which cannot be referenced by using {{>navbar}} in the template - the underscore is missing.

You should rename your partial file back to "navbar.hbs" (without the underscore) to get the template working.

From hbs documentation:

Partials that are loaded from a directory are named based on their filename, where spaces and hyphens are replaced with an underscore character:

template.html -> {{> template}}

template 2.html -> {{> template_2}}

login view.hbs -> {{> login_view}}

template-file.html -> {{> template_file}}

Basically, underscores are used by hbs to make a handlebars-valid name for your partial, you generally don't have to manually use them unless you really want to.