Why is the express-message plugin throwing a "messages is not defined" error?

M

mustfuck2020-04-21 12:27:00

Express.js

mustfuck, 2020-04-21 12:27:00

I'm taking a course, I'm doing my homework. I ran into a problem when adding the express-messages plugin. When starting the server, it gives an error

ReferenceError: /home/mustfuck/code/node/CmsShoopingCart/views/index.ejs:1
 >> 1| <%- include('_layouts/header'); -%>
    2| 
    3| <h1>Hello there</h1>
    4| 

/home/mustfuck/code/node/CmsShoopingCart/views/_layouts/header.ejs:51
    49|   
    50| 
 >> 51| <%- messages('messages', locals) %>

messages is not defined

I do everything according to the instructions. In the author's code, everything is the same as mine. It works for him. On the plugin site, it is written, the same as mine. But it shows an error messages is not defined Why?

plugin site
https://github.com/visionmedia/express-messages

structure
views
-index.ejs
-messages.ejs
-_layouts
--header.ejs
app.js

app.js

var express = require('express');
var path = require('path');
var mongoose = require('mongoose');
var config = require('./config/database');
var bodyParser = require('body-parser');
var session = require('express-session');
var expressValidator = require('express-validator');
 
mongoose.Promise = global.Promise;
mongoose.connect(config.database);
var db = mongoose.connection;
//db.on('error', console.error.bind(console, 'connection error'));
db.once('open', function(){
  console.log('Connected to mongodb');
});



var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({expanded: false}));
app.use(bodyParser.json());

app.use(session({
  secret: 'Keyboard cat',
  resave: false,
  saveUnitialited: true,
  cookie: {secure: true}

}));

app.use(expressValidator({
  errorFormatter: function(param, msg, value){
    var namespace = param.split('.')
    , root = namespace.shift()
    , formParam = root;

    while(namespace.length){
      formParam += '[' + namespace.shift() +']';
    }

    return {
      param: formParam,
      msg: msg,
      value: value
    };

  }
}));

app.use(require('connect-flash')());
app.use(function (req, res, next){
  res.locals.messages = require('express-messages')(req, res);
  next();
});

var pages = require('./routes/pages.js');
var adminPages = require('./routes/admin_pages.js');
app.use('/admin/pages', adminPages);
app.use('/', pages);

var port = 3000;
app.listen(port, function(){
  console.log('Server started on port ' + port);
} );

index.ejs

<%- include('_layouts/header'); -%>

<h1>Hello there</h1>

<%- include('_layouts/footer'); -%>

header.ejs

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
   
    <title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<main role="main" class="container">

  

<%- messages('messages', locals) %>

messages.ejs

<% Object.keys(messages).forEach(function (type) { %>

  <div class="alert alert- <%= type %>">
<%messages[type].forEach(function (message)) {%>
<%= message %>
<%}) %>
</div>
<%})%>