WebPack打包AWS Amplify UI报无效意外令牌语法错误

报错由两处配置缺陷共同导致：

• babel-loader 配置了全量排除 node_modules 目录，但 @aws-amplify/ui-react、aws-amplify 相关依赖的官方发布产物默认是ES2018+规范的现代JS代码，没有预编译到ES5兼容版本。执行生产打包时这部分代码未经过babel转译，包含Chrome、Safari特定解析逻辑下无法识别的语法。
• 直接通过file://协议打开本地dist目录下的HTML时，如果页面没有显式声明UTF-8字符集，浏览器会 fallback 到本地默认编码解析打包产物，@aws-amplify/ui-react 代码和样式中包含的特殊字符（如报错提到的\u00b0即°符号）会被识别为非法字符。

两种场景的差异也完全对应上述根因：webpack serve启动开发服务时，会自动在响应头携带Content-Type: text/html; charset=utf-8强制浏览器用UTF-8解析，同时开发模式不会对依赖代码做深度压缩，因此不会触发报错；Firefox自带的编码自动检测和现代语法兼容逻辑更完善，所以两种场景下都能正常运行。

按以下顺序修改配置即可解决问题：

• 调整babel-loader的排除规则，放行amplify相关依赖的转译
  找到webpack.config.js中处理js/jsx文件的规则，将exclude字段从原来的全量排除node_modules：

  exclude: /(node_modules|bower_components)/,
  

  修改为正则排除其他依赖、仅保留amplify相关包的转译逻辑：

  exclude: /node_modules\/(?!(@aws-amplify|aws-amplify)\/).*/,
  

• 在HTML模板头部添加字符集声明
  打开项目中./src/index.html模板文件，在<head>标签最开头添加UTF-8编码声明，避免本地打开时的编码解析错误：

  <meta charset="UTF-8">
  

• 按环境调整sourcemap配置
  当前固定使用inline-source-map会把sourcemap内容以base64格式内嵌到JS产物中，不仅会大幅增加生产包体积，也可能触发特殊字符解析问题。将配置中固定的devtool: 'inline-source-map'修改为按运行模式切换：

  devtool: argv.mode === 'production' ? 'source-map' : 'inline-source-map',
  

• 调整本地验证方式
  不要直接通过file://协议打开构建后的HTML文件，和线上运行环境保持一致，使用HTTP静态服务访问dist目录内容。比如可以在全局安装静态服务工具后，在dist目录执行serve .启动本地HTTP服务验证。

修改完成后重新执行webpack命令打包，通过HTTP服务访问构建产物，Chrome、Safari浏览器不会再抛出语法错误，Amplify UI组件可正常渲染。

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