描述:
我正在开发 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.
环境:节点 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"
}
}
我采取的步骤:
- 我确保使用的是最新版本的 Chakra UI 及其依赖项。
- 我已经尝试直接从包中使用命名导入,如下所示:
import { BellIcon, ChevronDownIcon } from '@chakra-ui/icons';
尽管采取了这些步骤,问题仍然存在,并且我无法成功构建我的应用程序。我怀疑 Chakra UI 图标包或我在 Next.js 项目中使用它的方式可能有问题。
最佳答案
我也遇到这个问题了。刚刚发现解决方案是将“use client”放在导入 Chakra-UI 的文件的顶部。我以前遇到过 Chakra-UI 在 “use server”
模式下与 Next.js 的应用程序路由器不兼容的问题,但我遇到了与您相同的错误,因为我将 “使用客户端”
在错误的地方。我最终不得不将其添加到我的用例中的页面,而不仅仅是组件。
不幸的是,截至撰写本文时,Chakra-UI 的当前版本在许多用例中与“使用服务器”
不兼容。每当您在 Next.js 应用路由器中遇到 Chakra-UI 错误时,我建议添加“使用客户端”
,直到问题消失,然后进行逆向工程以找出哪个文件实际需要它。
关于reactjs - Next.js 应用程序中的 Chakra UI 图标不受支持 "export *"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/76751675/