说明:
我正在开发一个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"
}
}
型
任何帮助或指导解决这个问题将不胜感激。提前感谢您的帮助。
我采取的步骤:
1.我确保我使用的是最新版本的Chakra UI及其依赖项。
1.我已经尝试过直接从包中使用命名导入,如下所示:
import { BellIcon, ChevronDownIcon } from '@chakra-ui/icons';
型
尽管采取了这些步骤,问题仍然存在,我无法成功构建应用程序。我怀疑Chakra UI图标包可能有问题,或者我在Next.js项目中使用它的方式有问题。
1条答案
按热度按时间1qczuiv01#
我也有这个问题。刚刚弄明白了解决方案是把
"use client"
放在导入Chakra-UI的文件的顶部。我以前遇到过Chakra-UI在"use server"
模式下与Next.js的应用程序路由器不兼容的问题,但我遇到了和你一样的错误,因为我把"use client"
放在了错误的地方。我最终不得不将它添加到我的用例中的页面中,而不仅仅是组件。不幸的是,在撰写本文时,Chakra-UI的当前版本在许多用例中与
"use server"
不兼容。每当你在Next.js应用程序路由器中遇到Chakra-UI错误时,我建议添加"use client"
,直到问题消失,然后进行逆向工程以找出哪个文件实际需要它。