Suppressing Errors or Handling non existing includes in Nunjucks Templating engine

by Praveen Kumar Purushothaman

For those who don't know, I am working on a project, where I am using the following stack:

Nunjucks is a templating engine similar to EJS, Jade and others, developed by Mozilla. For some reason, the project uses this templating engine although, it has been the "least scored" of all the common templating engines. I am surprised to see that Jade (which is worst of all, in my opinion - but many like it) is ranked #3 and Nunjucks comes at the end with a score of 240,521 Points.

Today I was doing a comparison of different styles. So, I had to use a quick hackjob kinda include the different partials in my content, but I tend to be a lazy kitten and go ahead with the quick and dirty include tag. BTW, did I say Nunjucks is a "port" of Jinja2 (which again is either too worst or new)?

If it was PHP, I would have simply done this:

<?php  
  if (file_exists($path))
    include $path;
  else
    include "404.inc";
?>

Unfortunately, that's not the case. The way I am including it in Nunjucks is as follows:

{% include "./style-" + style + ".html" %}

And I have the following files in my directory:

styles/  
├─ style-1.html
├─ style-2.html
├─ style-3.html
└─ style-4.html

The problem comes up if I try opening a path like: /preview/?style=5, which technically points to style-5.html, without any further check (I have no clue how to make it). If such URL is requested, it crashes the app by giving the following error:

Local - Listening on: http://localhost:8080/  
Proxy listening on: http://localhost:3000/  
BrowserSync: http://localhost:3001/  
C:\Users\praveen\My-App\app\middleware\nunjucks.js:58  
          throw new Error(err);
          ^
Error: Template render error: (C:\Users\praveen\My-App\views\pages\preview.html)  
  Error: template not found: C:\Users\praveen\My-App\views\pages\preview\style-5.html
    at C:\Users\praveen\My-App\app\middleware\nunjucks.js:58:17
    at C:\Users\praveen\My-App\node_modules\nunjucks\src\environment.js:23:23
    at RawTask.call (C:\Users\praveen\My-App\node_modules\asap\asap.js:40:19)
    at flush (C:\Users\praveen\My-App\node_modules\asap\raw.js:50:29)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
[14:42:09] [nodemon] app crashed - waiting for file changes before starting...

I was planning to use the synchronous file existence checker, using the following code:

var fs = require('fs');  
if (fs.existsSync(path)) {  
  // Include the file
} else {
  // Include 404.
}

But unfortunately, Nunjucks templating engine cannot use those components inside it's view rendering engine. Also, I am including the path only at the view level and not the controller level (bad design, right? Never mind, it's just for previewing stuff). I was left with no choice, literally.

After some searches, I found a Jinja2 implementation in Nunjucks about handing (read "suppressing") the errors caused by non-existent files. Voila, it's ignore missing flag on the include directive! So, I just added this option to the include:

{% include "./style-" + style + ".html" ignore missing %}

Everything worked as expected. The output was blank. At least the server didn't crash for me, while demonstrating it to the client! I am happy! Hope this makes someone happy too! And yeah, Happy Valentine's Day!