webpack打包引入mathjs出现非ASCII字符引发unexpected token错误

核心问题定位 #

你遇到的unexpected token错误本质是编码解析问题，而非webpack打包错误或mathjs本身的语法问题：你本地打开bundle.js能正常显示λ字符，说明打包产物本身是合法的，只是浏览器加载该JS文件时使用了错误的字符编码（默认使用Latin-1等非UTF-8编码），导致UTF-8编码的λ字符被拆分为λ两个乱码字符，触发语法错误。

具体解决方案 #

按优先级依次尝试以下操作即可修复：

• 首先检查引入bundle.js的HTML文件，在<head>标签最顶部添加UTF-8编码声明：

<meta charset="UTF-8">

绝大多数场景下添加该行即可解决问题，之前项目能正常运行大概率是之前的HTML文件存在该声明，后续修改时被意外删除。

• 若使用webpack-dev-server启动本地服务，在webpack.config.js中添加devServer的响应头配置，强制返回的JS资源使用UTF-8编码：

module.exports = {
  // 其他原有配置保持不变
  devServer: {
    headers: {
      'Content-Type': 'text/javascript; charset=utf-8'
    }
  }
}

• 可在webpack.config.js的output配置中显式开启UTF-8编码输出（webpack5默认已开启，显式配置可规避异常场景）：

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    charset: true // 新增该行即可
  }
}

补充说明 #

JavaScript原生支持Unicode字符作为变量名，mathjs中使用λ作为变量名是完全合法的用法，无需对mathjs本身做任何修改。

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