使用Express.js无法渲染index.ejs页面的问题排查与解决

问题情况 #

在LinkedIn课程学习Express.js搭建网站时，尝试渲染index.ejs页面，服务器却始终返回index.html。尝试更换(req,res)参数、传入"index"、合并app.get语句等方法均无效。

原server.js代码：

const { response } = require('express');
const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

app.set('view engine', 'ejs');

app.set('views', path.join(__dirname, './views'));

app.use(express.static(path.join(__dirname, './static')));

app.get('/', (req, res) => {
  response.render('index', { pageTitle: 'Welcome' });
  });

app.get('/speakers', (req, res) => {
  response.sendFile(path.join(__dirname, './static/speakers.html'));
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

删除index.html后出现错误：

TypeError: Cannot read properties of undefined (reading 'app')
    at ServerResponse.render (D:\building-website-nodejs-express\node_modules\express\lib\response.js:1017:22)
    at D:\building-website-nodejs-express\server.js:24:12
    at Layer.handle [as handle_request] (D:\building-website-nodejs-express\node_modules\express\lib\router\layer.js:95:5)
    at next (D:\building-website-nodejs-express\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (D:\building-website-nodejs-express\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (D:\building-website-nodejs-express\node_modules\express\lib\router\layer.js:95:5)
    at D:\building-website-nodejs-express\node_modules\express\lib\router\index.js:284:15
    at Function.process_params (D:\building-website-nodejs-express\node_modules\express\lib\router\index.js:346:12)
    at next (D:\building-website-nodejs-express\node_modules\express\lib\router\index.js:280:10)
    at SendStream.error (D:\building-website-nodejs-express\node_modules\serve-static\index.js:121:7)

文件夹结构：项目根目录包含server.js，以及views、static两个子文件夹；views目录存放index.ejs，static目录存放index.html和speakers.html。

问题原因 #

1. 错误使用全局response对象：代码开头错误解构导入response，且在路由回调中使用该全局对象，而非Express传入的回调参数，导致调用render时抛出未定义错误。
2. 静态文件中间件优先级：当static目录存在index.html时，express.static中间件会优先匹配根路径请求并返回静态文件，不会执行后续的根路由处理逻辑。

修正后的代码 #

const express = require('express');
const path = require('path');

const app = express();

const port = 3000;

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

app.use(express.static(path.join(__dirname, './static')));

app.get('/', (request, response) => {
  response.render('index', { pageTitle: 'Welcome' });
});

app.get('/speakers', (request, response) => {
  response.sendFile(path.join(__dirname, './static/speakers.html'));
});

app.listen(port, () => {
  console.log(`Express server listening on port ${port}!`);
});

修正说明 #

• 移除错误的const { response } = require('express');导入，改用路由回调函数传入的响应参数（参数名可自定义，只需保持回调内使用一致即可）。
• 确保使用Express框架传递的响应对象，保证render方法能正确调用。
• 若需彻底避免静态文件拦截EJS页面渲染，可将根路由app.get('/')的定义移至app.use(express.static(...))之前，让路由优先匹配请求。

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