Next.js React组件中const可重新赋值无TypeError问题咨询

问题描述 #

• 预期行为：对const变量执行重新赋值操作时，控制台应抛出TypeError，不会正常输出变量值
• 实际行为：点击按钮后无任何错误提示，console.log(num)成功输出77
• 测试环境：Chrome 104.0.5112.101（64位正式版）、Edge 104.0.1293.63（64位正式版）、VS Code 1.70.2
• 问题范围：仅在Next.js的React组件中出现，原生JavaScript文件中该行为符合预期（会正常抛出TypeError）

复现代码 #

const Component = () => {
  function reassign() {
    const num = 44;
    num = 77;
    // 实际运行时会输出77
    console.log(num);
  }

  return (
    <button onClick={reassign}>点击后不应输出77</button>
  );
};

export default Component;

问题原因 #

这个异常行为主要和Next.js开发模式下的**Fast Refresh（快速刷新）**机制有关：

• Fast Refresh为了提升开发体验，在热更新时会对代码做特殊处理，部分JavaScript语法检查逻辑被临时绕过，导致const重新赋值这类本应报错的操作没有被及时检测出来。
• 另外，Next.js默认使用的SWC或Babel编译器，在开发模式下的优化策略可能误将该错误逻辑转换为可执行代码，使得运行时没有触发TypeError。

解决方法 #

1. 临时关闭Fast Refresh排查
   在项目根目录的next.config.js中添加如下配置，重启开发服务后，const重新赋值的错误会正常触发：

   module.exports = {
     fastRefresh: false,
   }
   

2. 生产模式验证
   构建项目生产版本并启动：

   npm run build
   npm start
   

   生产模式下Next.js会启用严格的编译规则，此时const重新赋值的错误会被正确检测并抛出，和原生JS行为一致。

3. 提前做代码规范检查
   在项目中配置ESLint，开启no-const-assign规则，在编写代码阶段就能直接发现这类错误，无需等到运行时。比如在.eslintrc.json中添加：

   {
     "rules": {
       "no-const-assign": "error"
     }
   }
   

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