全新未修改NextJS默认项目执行npm run dev报错求助

严格按照官方文档使用npx create-next-app@latest创建了未修改的全新Next.js项目，编译正常，但执行npm run dev启动开发服务器后，终端抛出「Invalid hook call」警告和「TypeError: Cannot read properties of null (reading 'useContext')」错误。未在自定义代码中调用useContext，该函数仅出现在.next文件夹和node_modules的Next包中，平时常用Gatsby对NextJS不熟悉，求解决。

报错终端日志 #

noahpittman$ npm run dev

> ecommerce-dashboard@0.1.0 dev
> next dev

- ready started server on [::]:3000, url: http://localhost:3000
- event compiled client and server successfully in 83 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 78 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 1279 ms (426 modules)
- wait compiling...
- event compiled successfully in 89 ms (235 modules)
警告：无效的Hook调用。Hook只能在函数组件的内部调用。可能的原因如下：
1. React与渲染器（如React DOM）版本不匹配
2. 违反了Hook的使用规则
3. 应用中存在多个React副本
- error TypeError: Cannot read properties of null (reading 'useContext')
警告：无效的Hook调用。Hook只能在函数组件的内部调用。可能的原因如下：
1. React与渲染器（如React DOM）版本不匹配
2. 违反了Hook的使用规则
3. 应用中存在多个React副本
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (/Users/noahpittman/Documents/Coding Projects/React:Node/CMSDashboardwAPI_Ecommerce/ecommerce-dashboard/node_modules/next/dist/compiled/react/cjs/react.development.js:1752:21)
    at usePathname (webpack-internal:///(ssr)/../../../../../../../usr/local/lib/node_modules/next/dist/client/components/navigation.js:118:34)
    at ErrorBoundary (webpack-internal:///(ssr)/../../../../../../../usr/local/lib/node_modules/next/dist/client/components/error-boundary.js:110:50)
    at renderWithHooks (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8746:16)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8820:15)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8874:7)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderLazyComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9035:3)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9144:11)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9251:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8874:7)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at retryTask (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9688:5)
    at performWork (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9759:7)
    at Timeout._onTimeout (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8460:14)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
- error Error [TypeError]: Cannot read properties of null (reading 'useContext')
    at useContext (/Users/noahpittman/Documents/Coding Projects/React:Node/CMSDashboardwAPI_Ecommerce/ecommerce-dashboard/node_modules/next/dist/compiled/react/cjs/react.development.js:1752:21)
    at usePathname (webpack-internal:///(ssr)/../../../../../../../usr/local/lib/node_modules/next/dist/client/components/navigation.js:118:34)
    at ErrorBoundary (webpack-internal:///(ssr)/../../../../../../../usr/local/lib/node_modules/next/dist/client/components/error-boundary.js:110:50)
    at renderWithHooks (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8746:16)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8820:15)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8874:7)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderLazyComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9035:3)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9144:11)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9251:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at renderIndeterminateComponent (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8874:7)
    at renderElement (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9055:7)
    at renderNodeDestructiveImpl (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9221:11)
    at renderNodeDestructive (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9193:14)
    at retryTask (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9688:5)
    at performWork (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:9759:7)
    at Timeout._onTimeout (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8460:14)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  digest: undefined
}
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 601 ms (539 modules)

复现步骤 #

• 创建新目录
• 进入目录执行npx create-next-app@latest
• 执行cd my-app
• 执行npm run dev
• 访问开发服务器即可触发错误

解决方案 #

1. 统一React与React DOM版本 #

• 打开项目根目录的package.json，确认react和react-dom的版本号完全一致
• 若版本不匹配，执行以下命令重新安装：

npm uninstall react react-dom
npm install react@latest react-dom@latest

2. 清除多份React实例 #

• 执行命令查看项目中React的安装情况：

npm list react

• 如果输出显示多个React实例（比如全局安装的和本地项目的），先卸载全局的Next.js及相关依赖：

npm uninstall -g next react react-dom

• 删除项目的依赖缓存和编译产物：

rm -rf node_modules package-lock.json .next

• 重新安装项目依赖：

npm install

3. 用最新版本重新创建项目测试 #

• 先清除npx缓存，避免使用旧版本的create-next-app：

npx clear-npx-cache

• 重新创建一个干净的测试项目：

npx create-next-app@latest test-app
cd test-app
npm run dev

• 如果测试项目能正常运行，说明原项目存在依赖污染或缓存问题，将代码迁移到新项目即可。

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