运行代码时出现Next.js错误:TypeError:无法读取null的属性(阅读“useContext”)

vhipe2zx  于 2023-04-11  发布在  其他
关注(0)|答案(1)|浏览(204)

这是我的Next.js项目,我使用npx create-next-app@latest博客创建了它,昨天它工作得很好,直到今天当我尝试使用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>
  )
}

下面是图片:Error image

bybem2ql

bybem2ql1#

仅从package.json很难判断,但从它提到_document的错误消息来看。
上下文必须在_app中实现,而不是在_document中实现,还要确保从react导入useContext

相关问题