Express+TypeScript项目请求app.js报Unexpected token '<'错误如何解决

错误诱因 #

Uncaught SyntaxError: Unexpected token '<' 错误的核心原因是浏览器请求 /app.js 时，服务器返回的不是JS代码，而是HTML文件内容。HTML以<!DOCTYPE html>开头，浏览器将其当作JS解析时，遇到第一个<字符就会抛出语法错误。

触发该问题的具体原因：

1. 静态资源中间件路径配置错误：你运行的是dist/app.js，此时__dirname指向dist目录，path.resolve(__dirname, "dist")实际指向不存在的[项目根目录]/dist/dist路径，静态资源中间件完全不生效，所有请求都会落到通配路由。
2. 通配路由的sendFile回调逻辑完全写反：sendFile执行成功（无错误）时，你反而调用res.status(500).send(err)，打断了正常的响应流程。

解决方法 #

1. 修正静态资源中间件路径 #

将静态资源中间件的路径修改为当前dist目录即可，不需要额外拼接dist路径：

// 原错误配置
// app.use(express.static(path.resolve(__dirname, "dist")))
// 修正后
app.use(express.static(__dirname))

修改后express.static会直接在dist目录下查找请求的app.js等静态资源，匹配成功就直接返回，不会走到通配路由。

2. 修正sendFile的回调逻辑 #

你原有的回调逻辑中，成功响应时反而返回500错误，属于逻辑颠倒，修改为以下代码即可：

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "index.html"), (err) => {
    if (err) {
      // 仅发送出错时返回错误状态
      res.status(err.status || 500).send(err)
    }
    // 发送成功无需额外处理
  })
})

3. 确认TS编译和文件复制逻辑生效 #

• 检查tsconfig.json确保compilerOptions.outDir配置为./dist，执行npm run compile后dist目录下存在编译后的app.js文件。
• 执行npm run copy后，检查dist目录下存在复制过来的index.html文件。

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