EJS页面Header/Footer无法显示 技术问题求助

Hey there, let's fix that EJS include error you're hitting. The core issue jumps right out from the error message: Could not find the include file " header" — notice the extra space inside the quotes in your include statement? That's making EJS look for a file literally named header (with a leading space), which doesn't exist. Let's walk through all the fixes needed:

1. Fix the Include Statement Syntax #

Your line <%- include(" header" ) -%> has unnecessary spaces inside the quotes. Update it to:

<%- include("header") -%>

Make sure:

• The filename inside the quotes matches your actual header file exactly (case-sensitive! So if your file is header.ejs, don't write Header.ejs — this matters on macOS/Linux).
• header.ejs is saved directly in your views folder, not a subfolder.

2. Properly Structure Your Header and Footer Files #

First, ensure these files are named correctly as header.ejs and footer.ejs in the views directory, then fix their HTML structure:

Corrected header.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="css/styles.css" /> <!-- Fixed missing closing tag -->
</head>
<body>

Corrected footer.ejs #

<footer> Copyright 2020 Brenner Inc </footer>
</body>
</html>

(Note: Added the missing </body> tag to properly close the HTML structure)

3. Fix Potential Bugs in list.ejs #

You've got a couple of issues here that will cause errors once the include problem is fixed:

• In your forEach loop, you're trying to access newListItems[i].name, but i isn't defined here — use the item parameter instead:

  <% newListItems.forEach(function(item){ %>
  <form action="/delete" method="post">
      <div class="item">
          <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
          <p><%= item.name %></p> <!-- Fixed from newListItems[i].name -->
      </div>
  </form>
  <% }) %>
  

• You have both a forEach loop and a for loop rendering the same list items — this will duplicate your todos. Remove one of them (the forEach version is cleaner for this use case).

Once you apply all these changes, restart your app and the header/footer should load correctly.

内容的提问来源于stack exchange，提问作者Brenner