React-Tracked 开发模式下崩溃问题分析与解决方案

问题背景

React-Tracked 是一个用于状态管理的 React 库，它通过跟踪状态的访问来实现高效的重新渲染。在最新版本中，开发者在开发模式下遇到了一个崩溃问题，这个问题与 Node.js 的 process 对象和打包工具的交互有关。

问题根源分析

在 React-Tracked 的源代码中，有一段检查开发环境的代码：

if (typeof process === 'object' && process.env.NODE_ENV !== 'production') {
  useAffectedDebugValue(state, affected);
}

这段代码的本意是在非生产环境下启用调试功能。然而，问题出现在以下两个方面：

1. 现代打包工具（如 Webpack）通常会将 process.env.NODE_ENV 直接替换为字符串（如 "development"），但不会处理 process 对象本身。

2. 在某些模块联邦（Module Federation）场景下，process 对象可能被动态添加到全局对象（window）中，但形式可能不完整（如 { env: { NODE_ENV: '' } }）。

问题表现

当上述情况发生时，会导致：

1. 打包工具替换后的代码可能变成 if (typeof undefined === 'object' && "development" !== 'production')，这不会触发问题。

2. 但当模块联邦添加了不完整的 process 对象后，条件判断会通过第一部分（typeof process === 'object'），但第二部分（process.env.NODE_ENV !== 'production'）可能因为 process.env.NODE_ENV 不存在或为空而抛出错误。

3. 更严重的是，这会导致 useAffectedDebugValue 在不符合 React Hooks 规则的情况下被调用，引发崩溃。

解决方案演进

1. 临时解决方案：在应用入口文件手动添加 window.process = {}。这种方法虽然简单，但不够优雅，且可能影响其他依赖 process 对象的代码。

2. 打包工具配置：尝试配置打包工具完全替换 process 对象。但这对需要 process.nextTick 等功能的代码不友好，因为这些方法需要被特殊处理。

3. 最佳解决方案：使用模块级常量来缓存 process 对象的检测结果：

const hasGlobalProcess = typeof process === 'object';

这样做的优势在于：

• 打包工具不会替换模块级常量
• 检测只会在模块加载时执行一次
• 避免了运行时动态判断可能带来的问题

技术要点总结

1. 环境变量检测：在浏览器环境中检测 Node.js 的环境变量需要特别注意兼容性处理。

2. 打包工具行为：了解打包工具对 process.env 的特殊处理机制很重要，它们通常只替换特定的模式匹配。

3. 模块联邦兼容性：在微前端架构中，全局对象的污染问题需要特别关注。

4. React Hooks 规则：确保只在 React 组件或自定义 Hook 中调用其他 Hook，避免条件判断导致 Hook 调用不稳定。

最佳实践建议

1. 对于需要在浏览器和 Node.js 环境中都能运行的库，环境检测代码应该更加健壮。

2. 考虑使用专门的工具库（如 is-browser）来处理环境检测，而不是直接依赖 process 对象。

3. 在编写条件 Hook 调用时，确保条件本身是稳定的，不会在组件生命周期中发生变化。

4. 对于开源库，应该明确声明对环境的假设和要求，帮助使用者正确配置他们的构建工具。

React-Tracked 在 2.0.1 版本中已经修复了这个问题，开发者应该升级到最新版本以获得稳定的开发体验。