React.js无效Hook调用错误：react/react-dom依赖位置是否为诱因？

原因分析： #

• React 和 ReactDOM 是应用运行时的核心依赖，必须放在 dependencies 中。如果放在 devDependencies，生产环境打包时这些包不会被包含到最终产物里，会触发两种关键问题：
  1. 运行时找不到 React 核心库，直接抛出模块缺失错误；
  2. 项目依赖的其他库（比如你用的 react-redux、zustand）可能自带 React 依赖，此时应用会加载多份不同的 React 实例。而 React 的 Hook 机制严格要求整个应用只能存在单一 React 实例，多实例冲突就会触发 "Invalid Hook Call" 错误。

解决步骤： #

1. 修改 package.json，把 react 和 react-dom 从 devDependencies 移到 dependencies 中；
2. 重新安装依赖：

   npm install
   # 或 yarn install
   

3. 清理工具缓存（比如 Vite 的缓存）并重启开发服务器，确保依赖加载生效。

修改后的 package.json 示例：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "zustand": "^4.1.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.7.4",
    "typescript-language-server": "^0.11.2",
    "vite": "^3.0.4"
  }

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