Vite搭建React项目集成Ant Design时出现Hook调用无效等报错求助

以下是针对该问题的排查和修复步骤：

1. 检查React/ReactDOM版本冲突 #

执行命令查看依赖树，确认是否存在多个版本的React或ReactDOM：

npm ls react react-dom

如果输出显示重复的版本，按以下步骤清理：

• 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件
• 重新安装依赖：

  npm install
  

2. 配置Vite强制去重React依赖 #

在项目根目录的vite.config.js中添加resolve.dedupe配置，确保Vite只使用单一版本的React和ReactDOM：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
})

3. 确认React版本兼容性 #

检查package.json中react和react-dom的版本是否一致，且为兼容的稳定版本（比如均为18.x系列，Vite默认创建的React项目使用此版本）。若版本不匹配，手动指定版本重新安装：

npm install react@latest react-dom@latest

4. 确保DOM元素正确获取 #

虽然你的index.html中已定义#root元素，但可以通过延迟渲染确保DOM加载完成，避免获取null的问题：
修改main.jsx为：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

window.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('root')
  if (root) {
    ReactDOM.createRoot(root).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    )
  } else {
    console.error('未找到id为root的DOM元素')
  }
})

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