PugJs - template file not found / directory ignored

Question

I have a simple application that should output a small content. I use NodeJs, Express and Pug.

const pug = require('pug');
const express = require('express');
const app = express();

const indexFile = 'index'; // the file to load

app.set('view engine', 'pug'); // use pug

app.get('/', function (req, res) {
  res.render(indexFile, { templateToLoad: 'Views/Templates/temp.pug' }); // include a template file
});

app.listen(8888, function () {
  console.log('Server running on port 8888');
});

And my Pug file / HTML

doctype html
html
    body
      p default content on all pages
      include templateToLoad

My directory looks this

When starting the server I receive this error message

Error: ENOENT: no such file or directory, open 'C:\Users\mah\Desktop\Test\views\templateToLoad.pug'
    at C:\Users\mah\Desktop\Test\views\index.pug line 5
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:491:33)
    at Function.read (C:\Users\mah\Desktop\Test\node_modules\pug-load\index.js:69:13)
    at Object.read (C:\Users\mah\Desktop\Test\node_modules\pug\lib\index.js:147:25)
    at C:\Users\mah\Desktop\Test\node_modules\pug-load\index.js:24:25
    at walkAST (C:\Users\mah\Desktop\Test\node_modules\pug-walk\index.js:23:18)
    at C:\Users\mah\Desktop\Test\node_modules\pug-walk\index.js:104:20
    at Array.reduce (native)
    at walkAndMergeNodes (C:\Users\mah\Desktop\Test\node_modules\pug-walk\index.js:103:18)
    at walkAST (C:\Users\mah\Desktop\Test\node_modules\pug-walk\index.js:37:19)

but when debugging templateToLoad I get 'Views/Templates/temp.pug'. Why does the folder Templates get ignored?

try changing `Views/Templates/temp.pug` to `./View/Templates/temp.pug` — Denis Tsoi, Nov 21 '17 at 08:16
sorry it seems its relative to the `index.pug` - try `./Templates/temp.pug` (or `/Templates/temp.pug`) — Denis Tsoi, Nov 21 '17 at 08:23
hmm no sorry, same error message :/ even `Templates/temp.pug` did not work — peterHasemann, Nov 21 '17 at 08:28

score 1 · Answer 1 · answered Nov 21 '17 at 09:59

Did some digging around - It seems that pug does not support for dynamic includes (which you are trying to do here)

https://github.com/pugjs/pug/issues/569

possible workarounds include using jade.render or re-using res.render with in itself to generate templates.

score 1 · Accepted Answer · answered Nov 21 '17 at 09:59

Dynamic includes are not supported in pug. I suggest you to send template name and use conditionals in your index.pug to show required template.

Note : temp1, temp2 ... tempN needs to be exist in your Templates folder

doctype html
html
    body
      p default content on all pages
      if templateToLoad == "temp1"
        include Templates/temp
      else if templateToLoad == "temp2"
        include Templates/temp2

Send template name.

app.get('/', function (req, res) {
  res.render(indexFile, { templateToLoad: 'temp1' }); // include a template file
});

so this is almost similar to my code, it is not possbile writing something like this here `Templates/ + templateToLoad` — peterHasemann, Nov 21 '17 at 10:14

score 1 · Answer 3 · answered Nov 21 '17 at 10:24

Pug proposes Template inheritance https://pugjs.org/language/inheritance.html

So instead of rendering index.pug, you render your template :

index.pug :

doctype html
html
  body
    p default content on all pages
    block content

temp.pug :

extends index.pug
block content
  p My template

your server.js

app.get('/', function (req, res) {
  res.render('temp');
});

PugJs - template file not found / directory ignored

3 Answers3