CODEWITHSUNDEEP
node.jsexpressejs
Bopsi
Bopsi

Reputation: 2436

Ejs renders {} when including partials

I am using this link as reference to build a simple ejs app. Project structure:
- views
----- partials
---------- head.ejs
----- pages
---------- index.ejs
- package.json
- server.js

server.js: 

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

app.set('view engine', 'ejs');
app.use(express.json());
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('pages/index');
});

head.ejs :

<title>My Awesome Site</title>

index.ejs :

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head.ejs %> <!-- commenting out this line works -->
</head>
<body class="container">

<main>
    <div class="jumbotron text-center header">
        <a href="http://www.myawesomesite.org"><img src="/images/phbc_17.jpg"></a>
        <h2 class="page-header">Be Awesome!</h2>
        <p>Visit <a href="http://www.myawesomesite.org">www.myawesomesite.org</a></p>
    </div>
</main>

</body>
</html>

Index renders as expected when I am not including head.ejs partial in it. But, with head.ejs it's rendering only {} in the browser.

What am I doing wrong?

Upvotes: 1

Views: 109

Answers (1)

kedar sedai
kedar sedai

Reputation: 1722

I saw two problems.

  1. You didn't import ejsin your server.ejs file so import is as

    const ejs = require('ejs');

  2. Your ejs syntax is a mistake so use below syntax

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

    and this need to be inside your body tag

Upvotes: 1

Related Questions