React集成Auth0Provider时触发Invalid hook call错误求助

你集成Auth0Provider的代码如下：

ReactDOM.render(
<Auth0Provider
domain="my-domain"
clientId="my-clientID"
authorizationParams={{
  redirect_uri: window.location.origin
}}
 > 
<App />
</Auth0Provider>,
document.getElementById("root")
);

触发的警告：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

排查与解决步骤 #

1. 校验React与React DOM版本一致性 #

• 执行命令查看版本：

  npm list react react-dom
  # yarn用户执行
  yarn list react react-dom
  

• 确保两者版本完全匹配（如均为18.2.0），若不一致，卸载并重新安装匹配版本：

  npm uninstall react-dom
  npm install react-dom@对应React版本号
  

2. 检查组件Hook使用合规性 #

• 确认<App />及其所有子组件中，所有Hook（包括useAuth0）都在函数组件的顶层作用域调用，不得在条件判断、循环、嵌套函数或类组件中使用
• 若App是类组件，需重构为函数组件后再使用Auth0的Hook

3. 消除多份React实例 #

• 执行npm ls react查看依赖树，排查是否有子依赖引入了不同版本的React
• 若存在多份React，在项目根目录的package.json中添加resolutions字段强制统一版本：

  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

• 删除node_modules、package-lock.json（或yarn.lock），重新执行npm install/yarn install

4. 适配Auth0 SDK与React版本 #

• 确保@auth0/auth0-react版本支持当前React版本（v2.x要求React 16.8+），可升级至最新版：

  npm install @auth0/auth0-react@latest
  

5. 改用React 18官方渲染API（若使用React 18） #

React 18不再推荐使用ReactDOM.render，改用createRoot可避免渲染机制导致的Hook问题：

import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <Auth0Provider
    domain="my-domain"
    clientId="my-clientID"
    authorizationParams={{
      redirect_uri: window.location.origin
    }}
  >
    <App />
  </Auth0Provider>
);

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