ExpressJS+EJS页面加载报错：Unexpected token '<' 排查求助

问题场景 #

我用ExpressJS搭配EJS模板引擎搭建了包含Blockly应用与ThreeJS地图的网页。访问/applications/newApp时app.ejs运行正常，但访问/applications/:slug（加载已保存应用的请求）时页面崩溃，控制台报错：

Uncaught SyntaxError: Unexpected token '<' (at file.js:1:1)
Uncaught SyntaxError: Unexpected token '<' (at anotherFile.js:1:1)

相关代码 #

EJS代码（app.ejs片段） #

<p hidden id="pageName">
  <% if(page_name=="savedApp" ) { %>
    savedApp
    <% } else { %>
      newApp
      <% } %>
</p>

<p hidden id="slug">
  <% if(page_name=="savedApp" ) { %>
    <%= slug %>
    <% } else { %>
      none
      <% } %>
</p>

服务器接口代码 #

新建应用接口

exports.getNewApp = (req, res) => {
    res.render('app', {
        page_name: 'newApp',
    });
};

加载已保存应用接口

exports.loadApplication = async (req, res) => {
    try {
        res.render('a', {
            page_name: 'savedApp',
            slug: req.params.slug,
        });
    } catch (err) {
        console.log(err);
        res.status(500);
    }
};

静态资源配置 #

app.use(express.static(path.join(__dirname + 'public')));
app.use('/applications', express.static(path.join(__dirname + 'public/blocklyApplication')));

已尝试操作 #

• 检查EJS的<% %>标签，确认无语法错误
• 核对静态资源配置路径

还需检查的内容 #

• 模板渲染文件名错误：加载已保存应用的接口里，res.render('a', ...)应该改为res.render('app', ...)——当前渲染的是a.ejs而非目标的app.ejs，会直接导致页面结构异常、静态资源加载路径混乱。
• 静态资源相对路径问题：如果app.ejs中引用JS文件用的是相对路径（比如src="file.js"），访问/applications/:slug时浏览器会把请求路径解析为/applications/file.js，与实际资源位置不匹配。需改成绝对路径（比如src="/blocklyApplication/file.js"，根据实际文件存放位置调整）。
• 路由匹配顺序：确保静态资源的路由配置在/applications/:slug动态路由之前。如果动态路由先匹配，请求静态资源时会被当成slug参数处理，返回的是渲染后的HTML页面而非JS文件，浏览器把HTML当作JS解析就会触发Unexpected token '<'错误。
• slug参数特殊字符干扰：检查slug是否包含斜杠、点号等特殊字符，比如slug为test/file时，请求file.js会变成/applications/test/file/file.js，该路径不存在，服务器返回404页面（HTML），进而引发语法错误。
• 静态资源路径拼接错误：path.join(__dirname + 'public')应改为path.join(__dirname, 'public')（用逗号而非加号拼接路径），避免因__dirname末尾无斜杠导致路径拼接异常。同理path.join(__dirname + 'public/blocklyApplication')要改成path.join(__dirname, 'public', 'blocklyApplication')。

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