有时我的应用程序运行得很好,然后我会进行一些更改,它会在保存时给我这种类型的错误:
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>
);
}
node_modules
文件夹和 package-lock.json
,然后使用 npm install
问题根源:文员
@clerk/nextjs
和@clerk/clerk-react
包作为依赖项而不是对等依赖项进行反应,因此创建了一个骗局,根据React文档中的“Hooks规则”:
“如果您看到多个 React,您需要弄清楚为什么会发生这种情况并修复您的依赖关系树。例如,您正在使用的库可能错误地将 React 指定为依赖项(而不是对等依赖项)。 ”