CODEWITHSUNDEEP
expresshandlebars.js
DXXPublic
DXXPublic

Reputation: 19

Partials not found in hbs - express.js

Im trying to include hbs partials on my main.hbs but im getting an error that partials could not be found. Here is the code i have on the server.js

const express = require("express");
const hbs = require("hbs");

const port = process.env.PORT || 3000;
var app = express();

hbs.registerPartials(__dirname + "/views/partials");
app.set("view engine", "hbs");
app.use(express.static(__dirname + "/public"));


//
app.get("/",(req, res) => {
    res.render("main.hbs");
})

My folders structure looks like this

JS PROJECT 
    |__views
        |__partials
            |__htmlfooter.hbs   
            |__htmlheader.hbs
        |__main.hbs

... On the main.hbs i have

{{> htmlheader}}
<h1>test</h1>
{{> htmlfooter}}

When i start the server and hit that route i get the error:

Error: /Users/sansol/Projects/Web_Dev/JS_Project/views/main.hbs: The partial htmlheader could not be found
    at Object.invokePartial (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:266:11)
    at Object.invokePartialWrapper [as invokePartial] (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:68:39)
    at Object.eval [as main] (eval at createFunctionContext (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:5:31)
    at main (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:173:32)
    at ret (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/runtime.js:176:12)
    at ret (/Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:525:21)
    at /Users/sansol/Projects/Web_Dev/JS_Project/node_modules/hbs/lib/hbs.js:63:19
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

What am i doing wrong?

Thanks

Upvotes: 0

Views: 3883

Answers (2)

Squidward Tentacles
Squidward Tentacles

Reputation: 900

const express = require("express");
const hbs = require("hbs");

const port = process.env.PORT || 3000;
const app = express();

app.set("view engine", "hbs");
app.use(express.static(__dirname + "/public"));

hbs.registerPartials(__dirname + "/views/partials"); // Place `hbs.registerPartials` in here!

You must call hbs.registerPartials() after app.set("view engine", "hbs") !

Upvotes: 4

DXXPublic
DXXPublic

Reputation: 19

i found my a dumb mistake from my part but ill still add the answer Im running the server.js file from a folder called server therefor i was looking for the partials and public folders inside that folder when i used __dirname

To fix the the issue i added

const path = require("path")

and changed

hbs.registerPartials(path.join(__dirname, "../", "/views/partials"));
app.use(express.static(path.join(__dirname , "../" , "/public")));

Upvotes: 0

Related Questions