'ReferenceError: Path is not defined: EJS

The app runs for shop and admin routes but doesn't work for error route.Error routes was also in MVC format but i tested it without the architecture also.
Below is the snippet of app.js from root directory.

const path = require('path');

const express = require('express');
const bodyParser = require('body-parser');

const errorController = require('./controllers/error');

const app = express();

app.set('view engine', 'ejs');
app.set('views', 'views');

const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/admin', adminRoutes);
app.use(shopRoutes);

app.use((req, res, next) => {
  res.status(404).render('404', { pageTitle: 'Page Not Found' });
});

app.listen(3000);

And the 404 EJS code is 

<%- include('includes/head.ejs') %>
</head>

<body>
    <%- include('includes/navigation.ejs') %>
    <h1>Page Not Found!</h1>

<%- include('includes/end.ejs') %>

And, Navigation.ejs is 

<header class="main-header">
    <nav class="main-header__nav">
        <ul class="main-header__item-list">
            <li class="main-header__item">
                <a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a>
            </li>
            <li class="main-header__item">
                <a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">Add Product</a>
            </li>
        </ul>
    </nav>
</header>

It shows the following error: 

ReferenceError: C:\Users\Najus\Desktop\New folder\views\404.ejs:5
    3| 
    4| <body>
 >> 5|     <%- include('includes/navigation.ejs') %>
    6|     <h1>Page Not Found!</h1>
    7| 
    8| <%- include('includes/end.ejs') %>

C:\Users\Najus\Desktop\New folder\views\includes\navigation.ejs:6
    4|         <ul class="main-header__item-list">
    5|             <li class="main-header__item">
 >> 6|                 <a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a>
    7|             </li>
    8|             <li class="main-header__item">
    9|                 <a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">Add Product</a>

path is not defined
    at eval (eval at compile (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:618:12), <anonymous>:11:26)
    at returnedFn (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:653:17)
    at include (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:651:39)
    at eval (eval at compile (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:618:12), <anonymous>:12:17)
    at returnedFn (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:653:17)
    at tryHandleCache (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:251:36)
    at View.exports.renderFile [as engine] (C:\Users\Najus\Desktop\New folder\node_modules\ejs\lib\ejs.js:482:10)
    at View.render (C:\Users\Najus\Desktop\New folder\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\Najus\Desktop\New folder\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\Users\Najus\Desktop\New folder\node_modules\express\lib\application.js:592:3)

I have tried back and forth various ways looking up the internet and couldn't find the way to tweak the code.

node.jsexpressmodel-view-controller


Solution 1:[1]

reason is that path is undefined so in the navigation.ejs can't find path's value so to solve it you should add it in the render function

shortly, try adding in the 'path' parameter in the function render here:

res.status(404).render('404', { pageTitle: 'Page Not Found' });

to become like this

res.status(404).render('404', { pageTitle: 'Page Not Found', path: 'Error'});

that should make it work!

Solution 2:[2]

The solution provided by Ahmed Mokhtar is correct. I would like to describe a bit. actually for 404 ejs file when it is going to navigation.ejs, it is finding for "path". But as you haven't provided any object property as path to your 404 ejs it is throwing that not defined error, as path is not known to navigation ejs for 404 ejs

Solution 3:[3]

you are using 'path' attribute in the nav file but you are not sending path when you are rendering ..

i recognize the code from a course in udemy I'm doing it to and had the same problem

Solution 4:[4]

ejs uses relative path, so include the layout folder as part of the path i.e

<%- include('layouts/includes/navigation.ejs') %>

Solution 5:[5]

I also got the same error while doing this udemy course. To avoid this you have to change

app.use((req, res, next) => {
res.status(404).render('404', { pageTitle: 'Page Not Found' });
});

to

exports.get404 = (req, res, next) => {
res.status(404).render('404', { pageTitle: 'Page Not Found', path: 
'/404' });};

In short you have to set path:'/404'.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmed Mokhtar
Solution 2 Anupam datta
Solution 3 Itay Dali
Solution 4 wayne
Solution 5

Related Questions