Vite+React+TSX项目Firefox中onClick函数变为noop()求助

问题描述 #

在Firefox浏览器中运行基于Vite的React+TSX项目时，Logo组件的点击事件出现异常：原本应根据屏幕宽度动态修改header元素高度的onClick函数，通过yarn dev启动本地服务后被加载为function noop() {}。该功能此前正常运行，无明显改动后突然失效，尝试过抽离逻辑为独立函数、AI排查等方法均未解决。相关代码如下：

function Logo() {
  return (
    <a
      href={window.innerWidth > 600 ? "/home" : undefined}
      onClick={() => {
        if (window.innerWidth <= 600) {
          if (document.getElementById("header")!.style.height === "3rem") {
            document.getElementById("header")!.style.height = "100vh";
          } else if (
            document.getElementById("header")!.style.height === "100vh"
          ) {
            document.getElementById("header")!.style.height = "3rem";
          }
        }
      }}
    >
      <div>
        <img
          src="./src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
      </div>
    </a>
  );
}

排查方向与解决方案 #

1. 修复Vite开发环境的意外优化 #

Vite在开发模式下可能将“无明显副作用”的匿名箭头函数误优化为noop。解决方式：

• 将点击逻辑抽离为组件内的命名函数，避免匿名函数被误处理：

function Logo() {
  const handleLogoClick = () => {
    if (window.innerWidth <= 600) {
      const headerEl = document.getElementById("header");
      if (!headerEl) return;
      if (headerEl.style.height === "3rem") {
        headerEl.style.height = "100vh";
      } else if (headerEl.style.height === "100vh") {
        headerEl.style.height = "3rem";
      }
    }
  };

  return (
    <a
      href={window.innerWidth > 600 ? "/home" : undefined}
      onClick={handleLogoClick}
    >
      {/* 原有图片内容 */}
    </a>
  );
}

2. 清理缓存与重置Vite开发服务 #

浏览器缓存或Vite热更新异常可能导致旧代码残留：

• 打开Firefox开发者工具，在「网络」面板勾选「禁用缓存」，强制刷新页面（Ctrl+Shift+R）；
• 停止yarn dev，删除项目根目录下的node_modules/.vite文件夹，重新启动服务；
• 手动清除Firefox浏览器缓存（设置>隐私与安全>清除数据）。

3. 阻止标签默认行为 #

当<a>标签href为undefined时，Firefox可能干扰自定义点击事件：

• 在点击函数中添加event.preventDefault()，阻止默认跳转行为：

const handleLogoClick = (e) => {
  if (window.innerWidth <= 600) {
    e.preventDefault();
    const headerEl = document.getElementById("header");
    if (!headerEl) return;
    // 原有高度切换逻辑
  }
};

4. 修复运行时空值隐患 #

原代码中的!非空断言可能导致运行时错误，被React捕获后替换为noop：

• 移除非空断言，添加元素存在性检查，避免潜在报错：

const headerEl = document.getElementById("header");
if (!headerEl) return;
// 后续仅在headerEl存在时执行逻辑

5. 排查依赖或插件兼容性 #

近期依赖更新或Vite配置变更可能引发问题：

• 对比package.json中依赖版本，回退到功能正常时的版本测试；
• 检查vite.config.ts，逐一禁用新增的插件或配置项，定位冲突点。

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