使用createRoot时出现Invalid hooks call错误求助

以下是针对该错误的常见排查和解决方法：

• 严格遵守Hooks使用规则：所有Hooks必须在函数组件的顶层作用域调用，不能放在条件判断、循环、嵌套函数或异步逻辑里。比如绝对不能出现if (isLoaded) { useState([]); }这类写法。

• 保证React与ReactDOM版本一致：版本不兼容是高频触发原因。执行npm list react react-dom查看版本，若两者版本号不同，重新安装匹配版本，例如：

  npm install react@18.2.0 react-dom@18.2.0
  

• 排查多React实例问题：如果项目中存在多个React副本，会导致Hooks调用失效。在根组件中添加日志：

  import React from 'react';
  console.log('项目内React实例:', React);
  console.log('全局React实例:', window.React);
  

  若输出的实例不一致，按以下方式修复：

  • 删除项目根目录的node_modules和package-lock.json，重新执行npm install；
  • 若使用本地链接的组件库，确保库的package.json中把react设为peerDependencies，避免库自行安装React。

• 确认组件类型正确：Hooks只能在函数组件或自定义Hook中使用，类组件里不能调用Hooks。如果是类组件，要么改为函数组件，要么把Hooks逻辑抽成自定义Hook在函数组件中复用。

• 检查构建工具配置：以Webpack为例，确保没有重复打包React，可在配置文件中添加别名锁定依赖路径：

  const path = require('path');
  
  module.exports = {
    // 其他配置
    resolve: {
      alias: {
        'react': path.resolve(__dirname, 'node_modules/react'),
        'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
      }
    }
  };
  

如果以上方法都无法解决问题，请补充你的index.js、App组件代码以及错误截图中的具体提示内容，以便进一步定位问题。

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