NX Monorepo的React项目关闭模态框时出现'refs未定义' TypeError

在使用NX Monorepo的React项目中，通过CloseModal组件关闭模态框时触发错误：Uncaught TypeError: Cannot read properties of undefined (reading 'refs')。关闭逻辑为调用history.push({pathname: "/dashboard"})跳转路径，错误栈显示该错误发生在<CloseModal>组件中，具体调用栈如下：

Uncaught TypeError: Cannot read properties of undefined (reading 'refs')
        at detach (chunk-Q6I74RLG.js?v=00eb7286:3078:3)
        at chunk-Q6I74RLG.js?v=00eb7286:3150:9
        at chunk-Q6I74RLG.js?v=00eb7286:3105:9
        at safelyCallDestroy (chunk-E6XXLY7I.js?v=00eb7286:16748:13)
        at commitHookEffectListUnmount (chunk-E6XXLY7I.js?v=00eb7286:16875:19)
        at commitPassiveUnmountOnFiber (chunk-E6XXLY7I.js?v=00eb7286:18232:17)
        at commitPassiveUnmountEffects_complete (chunk-E6XXLY7I.js?v=00eb7286:18213:15)
        at commitPassiveUnmountEffects_begin (chunk-E6XXLY7I.js?v=00eb7286:18204:15)
        at commitPassiveUnmountEffects (chunk-E6XXLY7I.js?v=00eb7286:18169:11)
        at flushPassiveEffectsImpl (chunk-E6XXLY7I.js?v=00eb7286:19489:11)
        at flushPassiveEffects (chunk-E6XXLY7I.js?v=00eb7286:19447:22)
        at performSyncWorkOnRoot (chunk-E6XXLY7I.js?v=00eb7286:18868:11)
        at flushSyncCallbacks (chunk-E6XXLY7I.js?v=00eb7286:9119:30)
        at commitRootImpl (chunk-E6XXLY7I.js?v=00eb7286:19432:11)
        at commitRoot (chunk-E6XXLY7I.js?v=00eb7286:19277:13)
        at finishConcurrentRender (chunk-E6XXLY7I.js?v=00eb7286:18805:15)
    **The above error occurred in the <CloseModal> component.**

1. 组件卸载时访问已销毁的ref #

调用history.push跳转页面时，CloseModal组件会被卸载。若组件内部在useEffect的清理函数中直接访问某个ref，而该ref对应的DOM元素已被销毁，就会触发此错误。

解决办法：
在清理函数中先判断ref是否存在，再执行后续操作：

useEffect(() => {
  // 副作用逻辑
  return () => {
    if (modalRef.current) {
      // 执行清理操作，比如移除事件监听、重置状态等
    }
  };
}, []);

2. 第三方模态框库内部ref问题 #

如果CloseModal是基于第三方模态框库（如react-modal、Ant Design Modal等）封装的，可能是库内部在卸载流程中访问了已失效的ref。

解决办法：

• 升级使用的模态框库到最新稳定版，修复已知的卸载bug；
• 先关闭模态框再执行路由跳转，给组件留足清理时间：

const handleClose = () => {
  setModalVisible(false);
  setTimeout(() => {
    history.push({pathname: "/dashboard"});
  }, 100);
};

3. NX Monorepo打包优化导致ref丢失 #

NX的打包配置可能因过度tree-shaking，错误移除了CloseModal组件中与ref相关的代码，导致卸载时出现异常。

解决办法：

• 检查项目nx.json或tsconfig.json中的打包配置，调整tree-shaking规则，避免误删ref相关代码；
• 在CloseModal组件所在的library中，将组件标记为不可tree-shake（如通过webpack的sideEffects配置，或rollup的相关注释）。

4. React版本兼容问题 #

React 18的并发模式下，被动卸载流程可能存在ref未正确清理的bug，导致卸载时访问ref报错。

解决办法：

• 升级React到最新稳定版；
• 若使用React 18，尝试关闭并发模式（移除createRoot中的{concurrent: true}配置），验证是否解决问题。

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