reactjs - 在 Next.js 应用中使用 Chakra UI 图标时出现不支持的“export *”错误

描述：

我正在开发一个 Next.js 应用程序，并使用 Chakra UI 库进行样式和组件设计。但是，在构建过程中，我遇到了 Chakra UI 图标包的问题。

错误消息：

./node_modules/@chakra-ui/icons/dist/index.mjs
Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

环境：Node 19

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.0",
    "@chakra-ui/react": "^2.8.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "@types/node": "20.4.4",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "framer-motion": "^10.13.0",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

我采取的步骤：

1. 我确保自己正在使用最新版本的 Chakra UI 及其依赖项。
2. 我已经尝试过直接从包中使用命名导入，如下所示：

import { BellIcon, ChevronDownIcon } from '@chakra-ui/icons';

尽管采取了这些措施，问题仍然存在，我无法成功构建我的应用程序。我怀疑可能是 Chakra UI 图标包有问题，或者是我在 Next.js 项目中使用它的方式有问题。

答案＃1

我也遇到过这个问题。刚刚发现解决方法是在导入 Chakra-UI 的文件顶部放置 "use client"。以前我也遇到过 Chakra-UI 在 "use server" 模式下与 Next.js 的 app 路由不兼容的问题，但我因为把 "use client" 放错了位置，结果遇到了和你一样的错误。在我的使用场景中，我最终不得不把它添加到页面中，而不仅仅是组件中。

不幸的是，截至本文撰写时，当前版本的 Chakra-UI 在许多用例中与 "use server" 不兼容。每当你在 Next.js 应用路由中遇到 Chakra-UI 错误时，我建议先添加 "use client"，直到问题消失，然后再进行逆向工程，找出实际需要它的文件。