我试图在一个nextjs项目中使用react-hot-吐司，但是当我将其导入到任何文件时，我都会得到这个错误
error - ./node_modules/react-hot-吐司/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>
);
}
1条答案
按热度按时间qc6wkl3g1#
我认为你的问题与在Nextjs中的服务器组件上运行的代码有关。我遇到过类似的问题，当我在服务器组件上或从客户端组件渲染服务器组件时，另一个库（Tanstack Table）无法从react导入useState。尝试更改您的组件树，以便您不将客户端Toaster作为服务器导航栏的父级。