无法从@nextui-org/react导入Container和useToasts问题求助

问题原因 #

NextUI v2采用分包架构，核心包@nextui-org/react仅包含部分基础组件（比如你能正常使用的Input、Button），Container组件和useToasts钩子属于独立的子包，需要单独安装后才能导入。

解决步骤 #

1. 处理Container组件 #

• 安装对应的子包：

  npm install @nextui-org/container
  # 或使用yarn: yarn add @nextui-org/container
  # 或pnpm: pnpm add @nextui-org/container
  

• 修改导入语句：

  import { Container } from '@nextui-org/container';
  

2. 处理useToasts钩子 #

• 安装对应的子包：

  npm install @nextui-org/toast
  # 或yarn add @nextui-org/toast
  # 或pnpm add @nextui-org/toast
  

• 在应用根组件（比如layout.tsx）中添加ToastProvider包裹（必须步骤，否则useToasts无法正常工作）：

  import { ToastProvider } from '@nextui-org/toast';
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="zh-CN">
        <body>
          <ToastProvider>{children}</ToastProvider>
        </body>
      </html>
    );
  }
  

• 修改导入语句：

  import { useToasts } from '@nextui-org/toast';
  

额外说明 #

NextUI v2的分包设计是为了支持按需加载，减少最终打包体积。如果后续遇到其他组件/钩子导入失败的情况，可查阅NextUI v2的组件文档确认其所属的子包，安装后即可正常使用。

内容的提问来源于stack exchange，提问作者Emin Bilgic