Next.js运行报错TypeError: Cannot read properties of null (reading 'useContext')求助

我用npx create-next-app@latest blog创建了Next.js项目，昨天运行完全正常，但今天执行yarn dev或npm run dev时，直接抛出以下服务端错误。我确认自己根本没在项目里使用useContext，求帮忙排查问题。

错误日志 #

Server Error
TypeError: Cannot read properties of null (reading 'useContext')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.useContext
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react/cjs/react.development.js (1618:21)
useContext
node_modules\next\dist\pages\_document.js (707:105)
renderWithHooks
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/User/Documents/Coding/Nextjs/tutorial/blog/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)

项目相关文件 #

package.json #

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "formik": "^2.2.9",
    "framer-motion": "^10.11.2",
    "graphql": "^16.6.0",
    "graphql-request": "^5.2.0",
    "mongodb": "^5.2.0",
    "mongoose": "^7.0.3",
    "next": "^13.3.0",
    "next-auth": "^4.20.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-spinners": "^0.13.8",
    "react-toastify": "^9.1.2",
    "swiper": "^9.1.1",
    "swr": "^2.1.1",
    "typewriter-effect": "^2.19.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
}

_app.js #

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

_document.js #

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

排查建议 #

• 清理依赖缓存并重装：依赖缓存损坏或安装不完整可能导致这类异常，执行对应命令：

  # yarn用户
  yarn cache clean && rm -rf node_modules && yarn install
  # npm用户
  npm cache clean --force && rm -rf node_modules package-lock.json && npm install
  

• 对齐Next.js相关依赖版本：你的next版本是13.3.0，但eslint-config-next是13.2.4，版本不匹配可能引发兼容问题，建议把eslint-config-next升级到13.3.0，或者锁定next版本为13.2.4。
• 检查React版本冲突：用npm ls react或yarn list react查看是否存在多个React版本，多版本共存会导致Hook运行环境异常。
• 临时移除自定义_document.js：自定义的_document.js可能和新版本Next.js不兼容，先删除或注释该文件，启动项目测试，如果恢复正常再逐步调整。
• 检查环境变量变化：如果昨天到今天新增或修改了环境变量，尤其是和React/Next.js渲染相关的配置，排查是否存在配置错误。

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