React项目使用use-neo4j出现Invalid Hook Call错误如何解决

问题排查与解决步骤 #

• 检查React版本兼容性与一致性
  打开项目package.json文件，确认react和react-dom的版本号完全匹配，且最低版本不低于16.8.0。如果使用React 18版本，需要替换原有ReactDOM.render为React 18标准的渲染API，修改后代码如下：

  import React from "react";
  import { createRoot } from 'react-dom/client';
  import "./css/index.css";
  import App from "./js/App";
  import Nav from "./js/Nav";
  import { Neo4jProvider, createDriver } from "use-neo4j";
  
  const driver = createDriver("neo4j", "localhost", 7687, "lode", "neo4j");
  const root = createRoot(document.getElementById("root"));
  
  root.render(
    <React.StrictMode>
      <Neo4jProvider driver={driver}>
        <Nav />
        <App />
      </Neo4jProvider>
    </React.StrictMode>
  );
  

• 升级use-neo4j到最新版本
  旧版本use-neo4j对React 17/18的兼容性存在缺陷，执行以下命令升级依赖即可解决大部分Provider引发的Hook调用错误：

  npm install use-neo4j@latest
  # 若使用yarn则执行
  yarn add use-neo4j@latest
  

• 排查重复React实例
  在项目根目录执行命令npm ls react，如果输出中存在多个不同版本的react实例，删除根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件后重新执行npm install或yarn install即可。
• 临时关闭严格模式验证
  若以上步骤均未解决，可先移除<React.StrictMode>标签重试，部分旧版本第三方库在严格模式下会触发异常Hook调用问题。

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