生产环境部署React应用出现Minified React error #425求助

部署到生产环境后出现Uncaught Error: Minified React error #425，错误截图如下：

当前项目依赖版本：

// package.json
"dependencies": {
  "@supabase/supabase-js": "^1.35.6",
  "date-fns": "^2.29.2",
  "duration-fns": "^3.0.1",
  "next": "^12.2.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.34.2",
  "react-icons": "^4.4.0",
  "uuid": "^8.3.2"
},
"devDependencies": {
  "autoprefixer": "^10.4.8",
  "postcss": "^8.4.16",
  "tailwindcss": "^3.1.8"
}

错误原因解析 #

React压缩错误#425对应场景是：组件已经卸载，但代码仍尝试更新组件状态或触发副作用。开发环境下React有额外的警告提示，但生产环境压缩后会直接抛出这个错误。

排查与解决步骤 #

• 处理异步操作后的状态更新：比如Supabase数据请求、定时器这类异步任务，经常会在组件卸载后仍执行状态更新。可以通过标记组件挂载状态来规避：

  useEffect(() => {
    let isMounted = true;
  
    const fetchData = async () => {
      const { data } = await supabase.from('your_table').select();
      if (isMounted) {
        setData(data);
      }
    };
  
    fetchData();
  
    // 组件卸载时标记为已卸载
    return () => {
      isMounted = false;
    };
  }, []);
  

• 检查React Hook Form的使用：如果表单组件卸载后，仍调用register、setValue等方法，也会触发该错误。确保表单操作仅在组件挂载状态下执行，或在组件卸载时清理表单相关订阅。
• 修复Next.js与React 18的兼容性问题：Next.js 12.2.5对React 18的支持存在部分缺陷，尤其是SSR/SSG场景下的组件卸载逻辑。可以升级Next.js到12.3.x版本（该版本修复了大量React 18兼容问题），或临时降级React到17.x版本测试。
• 检查React Icons的渲染逻辑：确认没有在条件渲染中错误保留已卸载组件内的React Icons实例，比如在组件卸载后仍尝试渲染图标。

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