How to Fix Error EJS &#039;partial is not defined&#039;? - Coding

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.

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
How to Enable mod_rewrite for Apache 2.2?
12 Things You Must Do to Get a Junior Web Developer Job in 2024
How to Install Apache Web Server on Linux Cloud Server?
How to Enable HSTS for Enhanced Web Security in Apache?
How to Add User in Apache Group?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14