React项目中Recharts组件触发Hook调用无效等错误求助

问题概述 #

在React项目中使用Recharts时，仅保留Line和CartesianGrid组件可正常运行，但添加XAxis、Tooltip等组件后，控制台重复出现三类错误：

• Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
• Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
• 错误触发于<Text>组件内

已确认两个测试项目的package.json依赖完全一致，排除依赖版本差异问题。

解决排查方向 #

1. 检查是否存在多版本React实例 #

即使package.json依赖一致，node_modules中仍可能存在多个React副本，导致Hook调用上下文混乱。

• 执行命令查看依赖树：

  # npm
  npm ls react
  # yarn
  yarn list react
  

• 如果输出显示多个React版本，清理缓存并重新安装依赖：

  # 清理依赖文件
  rm -rf node_modules package-lock.json
  # 重新安装
  npm install
  

2. 确认组件的正确调用方式 #

确保FunctionGraph是作为React组件渲染，而非直接调用函数：

• 错误示例：

  // 直接调用函数会导致内部Hook执行上下文错误
  const graph = FunctionGraph({ data: [...] });
  

• 正确示例：

  <FunctionGraph data={[...]}/>
  

3. 排查项目构建配置问题 #

• 检查Webpack的resolve.alias配置，确认React被指向正确的单例路径：

  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
  

• 检查Babel配置，确保@babel/plugin-transform-react-jsx等插件版本与React版本兼容，避免编译时破坏组件结构。

4. 验证Recharts导入的正确性 #

确保所有组件都从recharts根路径导入，避免从子模块导入导致的内部Hook异常：

• 正确导入：

  import { LineChart, Line, CartesianGrid, XAxis } from 'recharts';
  

• 避免错误导入：

  // 不要从子目录导入组件
  import XAxis from 'recharts/lib/component/XAxis';
  

5. 检查项目运行环境差异 #

如果该项目是SSR（服务端渲染）环境，Recharts的部分组件可能需要做兼容处理：

• 尝试用动态导入包裹图表组件，确保仅在浏览器环境渲染：

  import dynamic from 'next/dynamic'; // 以Next.js为例
  const FunctionGraph = dynamic(() => import('./FunctionGraph'), { ssr: false });
  

内容的提问来源于stack exchange，提问作者jgmoore3.5