NextJS 14/React 18升级后前端报错：无法访问useState/useEffect，dispatcher为null

以下是针对TypeError: can't access property "useState", dispatcher is null错误的排查和解决步骤：

• 修正自定义Hook命名
  自定义Hook必须遵循React的命名规则：必须以use开头（小写字母u）。你的组件命名为UseModal，不符合规则，React无法识别这是一个Hook，导致无法获取React上下文。将其改为useModal即可：

  const useModal = () => {
    const [isActive, setIsActive] = useState<boolean>(false);
    // 其他逻辑
  };
  

• 确保组件是客户端组件（App Router场景）
  如果你使用Next.js 14的App Router，默认组件是服务器组件，不能使用React Hook。在使用Hook的组件或Hook文件顶部添加'use client'指令，标记为客户端组件：

  'use client';
  import { useState } from 'react';
  
  const useModal = () => {
    const [isActive, setIsActive] = useState<boolean>(false);
    // ...
  };
  

• 检查React导入规范
  虽然React 17+支持自动导入JSX，但在自定义Hook文件中，确保显式导入React或Hook：

  import React, { useState, useEffect } from 'react';
  

  部分TypeScript配置或旧依赖可能需要显式导入才能正确识别React上下文。

• 清理缓存与重新构建
  执行以下命令彻底清理缓存和依赖，避免旧编译产物或缓存导致的问题：

  rm -rf node_modules .next
  yarn cache clean
  yarn install
  yarn build
  

• 排查依赖树中的隐藏React版本
  使用yarn why react命令查看完整的React依赖树，确认是否有第三方依赖偷偷引入了其他版本的React。即使设置了resolutions，某些包可能通过内部打包或错误的peer依赖配置引入多版本，需要针对性替换或升级这些依赖。

• 验证根组件的上下文挂载

  • 若使用Pages Router：检查_app.tsx是否正确渲染组件，确保没有遗漏React上下文的包裹，比如React.StrictMode是否正确使用。
  • 若使用App Router：检查根layout.tsx是否正确导入React，并确保客户端组件的渲染层级正确，避免在服务器组件中直接使用Hook。

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