新创建的Next.js(TypeScript)应用运行next dev时出现useContext错误求助

问题场景 #

多次执行npx create-next-app@latest --ts创建TypeScript版Next.js项目，未修改任何代码，运行next dev时直接抛出以下错误：

TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/Users/workingkakha/Documents/arcton/web/marketplace/node_modules/react/cjs/react.development.js:1618:21)
    at Html (webpack-internal:///../../../../../../opt/homebrew/lib/node_modules/next/dist/pages/_document.js:260:106)
    at renderWithHooks (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5661:16)
    at renderIndeterminateComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5734:15)
    at renderElement (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5949:7)
    at renderNodeDestructiveImpl (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6107:11)
    at renderNodeDestructive (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6079:14)
    at finishClassComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5691:3)
    at renderClassComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5699:3)
    at renderElement (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5946:7)
error - TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/Users/workingkakha/Documents/arcton/web/marketplace/node_modules/react/cjs/react.development.js:1618:21)
    at Head (/Users/workingkakha/Documents/arcton/web/marketplace/node_modules/next/dist/shared/lib/head.js:202:34)
    at renderWithHooks (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) {
  page: '/'
}
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
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/Users/workingkakha/Documents/arcton/web/marketplace/node_modules/react/cjs/react.development.js:1618:21)
    at Html (webpack-internal:///../../../../../../opt/homebrew/lib/node_modules/next/dist/pages/_document.js:260:106)
    at renderWithHooks (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5661:16)
    at renderIndeterminateComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5734:15)
    at renderElement (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5949:7)
    at renderNodeDestructiveImpl (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6107:11)
    at renderNodeDestructive (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6079:14)
    at finishClassComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5691:3)
    at renderClassComponent (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5699:3)
    at renderElement (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5946:7)

解决方案 #

这个错误核心原因是全局Next.js与本地项目依赖的React版本不兼容，导致加载多个React实例，按以下步骤修复：

• 卸载全局安装的Next.js：

  npm uninstall -g next
  

• 删除项目目录下的依赖文件和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装本地依赖：

  npm install
  # 若使用yarn则执行：yarn install
  

• 检查package.json，确保react和react-dom版本完全一致（比如均为18.2.0），若不一致手动修改后重新安装依赖
• 使用本地Next.js命令启动项目：

  npx next dev
  

原理说明 #

全局安装的Next.js会调用全局依赖的React，而本地项目有独立的React依赖，两个版本不一致时会导致React上下文初始化失败，触发useContext读取null的错误。使用本地命令启动可确保加载项目内的依赖版本。

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