NextJs 应用程序可以正常工作,然后突然出现以下错误: TypeError: Cannot read properties of null (reading 'useReducer')

问题描述 投票:0回答:1

有时我的应用程序运行得很好,然后我会进行一些更改,它会在保存时给我这种类型的错误:

TypeError: Cannot read properties of null (reading 'useReducer')

它会在正常运行和完全崩溃之间来回切换

这是我现在的

package.json
:

{
  "name": "devsocial",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/clerk-react": "^5.21.2",
    "@clerk/nextjs": "^6.9.9",
    "convex": "^1.18.2",
    "formik": "^2.4.6",
    "next": "15.1.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "yup": "^1.6.1"
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.1.0",
    "@types/node": "^20",
    "@types/react": "^19.0.4",
    "@types/react-dom": "^19.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

这是我的

layout.tsx
:

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { ClerkProvider } from '@clerk/nextjs';
import { ConvexClientProvider } from '../Providers/ConvexClientProvider';

const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
  title: 'socialdev',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang='en'>
        <body className={`${inter.className} bg-neutral-blue `}>
          <ConvexClientProvider>{children}</ConvexClientProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}
  • 我还确保我的库支持 React 19 和 Next 15
  • 我还尝试过清理缓存,删除
    node_modules
    文件夹和
    package-lock.json
    ,然后使用
    npm install
  • 重新安装
javascript reactjs typescript next.js convex
1个回答
0
投票

问题根源:文员

@clerk/nextjs
@clerk/clerk-react
包作为依赖项而不是对等依赖项进行反应,因此创建了一个骗局,根据React文档中的“Hooks规则”:

“如果您看到多个 React,您需要弄清楚为什么会发生这种情况并修复您的依赖关系树。例如,您正在使用的库可能错误地将 React 指定为依赖项(而不是对等依赖项)。 ”

© www.soinside.com 2019 - 2024. All rights reserved.