我试图在nextjs项目中使用react-hot-toast，但当我将其导入任何文件时，我得到这个错误
error - ./node_modules/react-hot-toast/dist/index.mjs试图导入错误:'useState'未从'react'导出(导入为'j')。
这是我尝试导入的文件
'use client';
import { Icons } from '@/components/Icons';
import { cn } from '@/lib/utils';
import * as React from 'react';
import hotToast, { Toaster as HotToaster } from 'react-hot-toast';
export const Toaster = HotToaster;
他们在这个文件中使用它
import '@/styles/globals.css';
import { Inter } from 'next/font/google';
import { cn } from '@/lib/utils';
import Providers from '@/components/Providers';
import Navbar from '@/components/Navbar';
import { Toaster } from '@/components/ui/toast';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html
lang='en'
className={cn('bg-white text-slate-900 antialiased', inter.className)}
>
<body className='min-h-screen bg-slate-50 dark:bg-slate-900 antialiased'>
<Providers>
<Toaster position='bottom-right' />
{/* @ts-expect-error Server Component */}
<Navbar />
{children}
</Providers>
<div className='h-40 md:hidden' />
</body>
</html>
);
}
我认为你的问题与在Nextjs服务器组件上运行的代码有关。我有一个类似的问题，另一个库(Tanstack Table)不能从react中导入useState，当我在服务器组件上或从客户端组件渲染服务器组件时。尝试更改组件树，使客户端Toaster不作为服务器导航栏的父组件。