TypeScript React中使用||=运算符触发webpack报错是什么原因？

核心报错原因 #

||= 是 ES2021（ES12） 版本新增的逻辑赋值运算符，你当前项目的Babel配置未包含该新语法的转译支持，因此babel-loader解析代码时无法识别这个语法，直接抛出了Unexpected token的解析错误。

注意：你替换的return changed = changed | false写法存在逻辑问题，这里的|是按位或运算符，会将操作数转为数字后做位运算，最终只会返回0/1类的数值结果，和你原本changed ||= false的逻辑或赋值意图完全不同。如果changed是字符串、对象、非0数字等非布尔值时，两种写法的结果会完全不一致，可能引发隐藏的业务bug，建议优先替换为等价的兼容写法changed = changed || false。

解决方案 #

• 方案一（无配置成本，推荐）：直接替换||=为兼容所有ES版本的等价写法
  把return changed ||= false替换为return changed = changed || false即可，无需修改任何编译配置，也能保证逻辑和原本的意图完全一致。
• 方案二（保留新语法）：给Babel添加对应语法的转译支持
  1. 安装转译插件：
     npm install @babel/plugin-proposal-logical-assignment-operators --save-dev
  2. 在项目Babel配置文件（.babelrc、babel.config.json或package.json的babel字段）中添加插件配置：

  {
    "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
  }
  

  也可以直接升级使用@babel/preset-env并配置正确的浏览器兼容目标，preset-env会自动根据兼容要求引入所有需要的转译插件，不需要单独配置单个语法插件。

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