CODEWITHSUNDEEP
node.jsejsproject
Adolfo Tomas Castrillon
Adolfo Tomas Castrillon

Reputation: 21

I'm getting a reference error while using ejs in my nodejs project

I am currently doing a course on node js, in the last video I was supposed to convert my entire project into ejs which I did almost successfully. While I understand the logic behind templating engines and how the routing system works (or at least I like to think that), i'm currently stuck on a problem where all the pages of the project render just fine expect for the 404 error one, the deal is that i'm not sure where the mistake is. Clearly i'ts not a sintax problem since the code is written fine so i'm assuming it's a logical error but I can't seem to find where it can be. Funny thing is when I delete the <%- include('includes/navigation.ejs') %> in the 404.ejs file it works fine, it won't render the navigation bar but at least the body will. What I want to understand is how the navigation template for this specific project is messing with my 404.ejs file by not allowing it to render but it won't mess with the rest of the files in the project.

Help would be very much appreciated, thank you.

Here I will give you guys the code of my project so you can help me out

navigation.ejs:

    <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>

404.ejs:

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

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

user.js:

const path = require('path');

const express = require('express');

const rootDir = require('../util/path');

const adminData = require('./admin');

const router = express.Router();

router.get('/', (req, res, next) => {
    const products = adminData.products;
    res.render('shop', {
        prods: products, 
        pageTitle: 'Shop', 
        path:'/', 
        hasProducts: products.length > 0, 
        activeShop: true, 
        productsCSS: true
    });
});

module.exports = router;

Error message:

ReferenceError: C:\Users\TOMAS\Desktop\nodejs templatingEngines\views\404.ejs:4
    2| </head>
    3| <body>
 >> 4|     <%- include('includes/navigation.ejs') %>
    5|     <h1>Page Not Found!</h1>
    6|
    7| <%- include('includes/end.ejs') %>

C:\Users\TOMAS\Desktop\nodejs templatingEngines\views\includes\navigation.ejs:4
    2|     <nav class="main-header__nav">
    3|         <ul class="main-header__item-list">
 >> 4|             <li class="main-header__item"><a class="<%= path=== '/' ? 'active' : ''%>" href="/">Shop</a></li>
    5|             <li class="main-header__item"><a class="<%= path=== '/admin/add-product' ? 'active' : ''%>" href="/admin/add-product">Add Product</a></li>
    6|         </ul>
    7|     </nav>

path is not defined
    at eval (eval at compile (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:662:12), <anonymous>:12:26)
    at navigation (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:692:17)
    at include (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:690:39)
    at eval (eval at compile (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:662:12), <anonymous>:13:17)
    at 404 (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:692:17)
    at tryHandleCache (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:272:36)
    at View.exports.renderFile [as engine] (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\ejs\lib\ejs.js:489:10)
    at View.render (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\Users\TOMAS\Desktop\nodejs templatingEngines\node_modules\express\lib\application.js:592:3)

Upvotes: 0

Views: 4734

Answers (4)

Rijas Afradi M
Rijas Afradi M

Reputation: 1

Easy way is in user.js:

router.get('/', (req, res, next) => {
  const products = adminData.products;
  res.render('shop/add-product', {  // That is file name
    prods: products, 
    pageTitle: 'Shop', 
    path:'/', 
    hasProducts: products.length > 0, 
    activeShop: true, 
    productsCSS: true
  });
});

Upvotes: 0

블루코너
블루코너

Reputation: 1

ejs reference error!

app.get routing definition

duplicate Check!

non db connecting direct route one and db connect route one

it's my case ^^

Upvotes: 0

Aronno Ahsan
Aronno Ahsan

Reputation: 33

Here, the main problem is in the path variable. The navigation.ejs file requires path variable, but for your 404 page you never got the path variable. So you have to put a path variable for it. In your error controlling file or error controlling function put a path variable.

res.render("404", { path: "", pageTitle: "404 Not Found" });

(I defined an empty value for path, and it worked for me; I don't know if it is the best way or not.)

Upvotes: 0

Bamba675
Bamba675

Reputation: 103

Because navigation.ejs uses the variable path. But when you include your navigation.ejs module, you don't hand over this variable. Look at your user.js, there you also render a .ejs file, and you hand over variables like prods, pageTitle, path, and so on.

Upvotes: 0

Related Questions