Difficulty using nested partials

[Fauntleroy]

I'm having some trouble using partials nested in a folder; ex: {{> path/to/my/partial}}

Here's how I have things set up:

/server.js
/views/index.hbs
/views/cats/index.hbs
/views/cats/listing.hbs

Express configuration is like so...

var express = require('express');
var express_handlebars = require('express3-handlebars');
var router = express();

router.engine( 'hbs', express_handlebars({
    extname: '.hbs',
    partialsDir: __dirname +'/views'
}) );
router.set( 'view engine', 'hbs' );
router.set( 'views', __dirname +'/views' );

router.get( '/', function( req, res ){
    res.render('index');
});

Finally, imagine index.hbs is like so:

<h1>Index</h1>
{{> cats/index}}

[ericf]

Are you getting errors? Also which version of the Handlebars npm module are you running?

[Fauntleroy]

The error I get in my actual app (some paths may be slightly different):

Error: The partial cats/index could not be found
    at new Error (unknown source)
    at Error.Handlebars.Exception (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/handlebars/lib/handlebars/utils.js:8:41)
    at Object.Handlebars.VM.invokePartial (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:53:13)
    at Object.eval (eval at <anonymous> (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:513:25))
    at Handlebars.VM.template (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:28:27)
    at Handlebars.compile (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:1110:21)
    at ExpressHandlebars.extend._renderTemplate (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/lib/express3-handlebars.js:283:22)
    at ExpressHandlebars.renderTemplate (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/lib/express3-handlebars.js:141:18)
    at async.iterator.fn (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/async/lib/async.js:517:34)
    at async.waterfall.wrapIterator (/Users/Tim/Work/repos/solidus/node_modules/express3-handlebars/node_modules/async/lib/async.js:441:34)

[Fauntleroy]

As for the handlebars version, it's whatever express3-handlebars is using--I haven't specified anything special.

[ericf]

The quick fix is to limit handlebars to version 1.0.7 or older. You can do this by adding the following to your package.json:

"handlebars": "<=1.0.7"

I am working on better fix which will branch based on the version of Handlebars and only apply the partials path fix on the older versions.

I'll ping this issue when I get a proper fix released.

[Fauntleroy]

That'll work for now, thanks for staying on top of this. :+1:

[ericf]

@Fauntleroy I pushed 0.2.3 to npm which properly corrects this issue.

[daslicht]

I have the same issue after switching the extension to hbs.

I have version: "version": "0.5.0"

Any idea what to try, besides switching back teh file extension to .handlebars , please?

[alastaircoote]

@daslicht I had the same problem, which was fixed by adding extname:'.hbs' to my express3-handlebars config.

[daslicht]

Hm I had this one, but i still got that error: (switched now back to .handlebars)

app.engine('.hbs', exphbs({extname: '.hbs'}));
app.set('view engine', '.hbs');

Maybe that do not work with Express4?

[rishinarang007]

I am getting same error, my config looks like this on express 4 and HB 4.0.5.

var hbs = exphbs.create({
    defaultLayout: 'main',
    helpers      : helpers,
    partialsDir: [
        'shared/templates/',
        'views/partials/'
    ]

and partial looks like

Example App: {{title}}
{{>icon_tag}}

please let me know the fix

[ngohuytrieu]

Just in case someone still encounters this issue, for nested partials you need to add each individual partial path in the config. Example:

/views/index.hbs
/views/cats/index2.hbs
/views/cats/listing.hbs

Then inside the view config be like:

partialsDir: [
    `${__dirname}/${viewPath}/views`,
    `${__dirname}/${viewPath}/cats`
  ]

From then we call each partial just like this:

{{> index}}
{{> index2}}
{{> listing}}