How to Fix Error EJS 'partial is not defined'?

Last Updated : 26 Jun, 2024

This article provides a detailed explanation of the ejs 'partial is not defined' error, detailing various approaches to resolve it, from using native EJS features to creating custom functions. The error 'partial is not defined' occurs in EJS when you use a partial function that hasn't been defined. EJS itself doesn't come with a built-in partial function. This function typically needs to be defined manually or is provided by a framework or middleware.

Below are the approaches by using these we can remove the error:

Table of Content

Using EJS include Syntax
Creating a Custom partial Function
Using Middleware or Helper Functions in Express.js

Using EJS includes Syntax

EJS has an include function that allows you to include other EJS files within your templates.

Syntax:

<%- include('path/to/partial') %>

Explanation:

<%- is used to output the unescaped content, which is important for including other templates.
include('path/to/partial') includes the content of the specified partial EJS file.

Steps to Implement:

Step1: Ensure the Partial File Exists:

Create a partial file, e.g., views/partials/header.ejs.

Step2: Use the include Keyword in Your Main Template:

In your main EJS file (views/index.ejs):

<body>
  <%- include('partials/header') %>
  <!-- Other content -->
</body>

Creating a Custom partial Function

You can define your own partial function in your Node.js application to render partials.

Syntax:

app.locals.partial = function(name) {
  return fs.readFileSync(__dirname + '/views/' + name + '.ejs', 'utf8');
};

Explanation:

app.locals.partial creates a global function available in all EJS templates.
fs.readFileSync reads the content of the partial file synchronously.

Steps to Implement:

Step1: Define the Function in Your app.js:

import express from 'express';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

app.locals.partial = function(name) {
  return fs.readFileSync(path.join(__dirname, 'views', 
                                         'partials', name + '.ejs'), 'utf8');
};

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page' });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Step2: Use the Custom partial Function in Your EJS Template:

<body>
  <%- partial('header') %>
  <!-- Other content -->
</body>

Using Middleware or Helper Functions in Express.js

Express.js can be configured to use helper functions for rendering partials.

Syntax:

res.render('view', {
  partial: function(name) {    
return fs.readFileSync(path.join(__dirname, 'views', name + '.ejs'), 'utf8');
  }
});

Explanation:

Adding a helper function to the render context allows for dynamic partial inclusion.

Steps to Implement:

Step1: Define the Helper Function within Your Route Handler:

import express from 'express';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();

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

app.get('/', (req, res) => {
  res.render('index', {
    title: 'Home Page',
    partial: function(name) {
      return fs.readFileSync(path.join(__dirname, 'views', 'partials', name + '.ejs'), 'utf8');
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Step2: Use the Helper Function in Your EJS Template:

<body>
  <%- partial('header') %>
  <!-- Other content -->
</body>

Conclusion

The 'partial is not defined error' in EJS can be resolved by using different methods depending on your application's needs. The simplest approach is to use the built-in EJS include syntax. For more flexibility, you can define a custom partial function within your application, either globally or within specific routes. This article provides detailed steps to implement each approach using ES6 module syntax-. By following these instructions, you can effectively manage your partial templates and ensure your EJS views render correctly.