Next.js项目中Chakra UI Icons的'export *'不支持错误求助

问题概述 #

开发Next.js应用并使用Chakra UI时，执行next build遇到如下错误：

./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"
  }
}

已尝试更新Chakra UI依赖、使用命名导入图标，但问题未解决。

可行解决方案 #

1. 直接导入图标文件路径 #

绕过包的index导出，直接从具体文件导入图标：

import BellIcon from '@chakra-ui/icons/dist/icons/BellIcon.mjs';
import ChevronDownIcon from '@chakra-ui/icons/dist/icons/ChevronDownIcon.mjs';

这种方式避开了index.mjs里的export *语句，直接引用单个图标模块。

2. 配置Next.js转译@chakra-ui/icons #

在next.config.js中添加transpilePackages配置，让Next.js转译该包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@chakra-ui/icons'],
  // 保留你原有的其他配置
}

module.exports = nextConfig;

该配置会让Next.js处理@chakra-ui/icons的模块导出逻辑，解决export *的兼容性问题。

3. 降级@chakra-ui/icons版本 #

如果上述方法无效，可尝试降级到2.0.17版本（该版本未使用export *导出）：

npm install @chakra-ui/icons@2.0.17
# 或使用yarn
yarn add @chakra-ui/icons@2.0.17

问题原因 #

Next.js 13+的App Router对客户端组件的模块导出有严格限制，@chakra-ui/icons 2.1.0版本的index.mjs使用了export * from './icons'语句，即使你自己代码里用了命名导入，Next.js在处理包模块时仍会检测到这个不被支持的导出方式，从而抛出构建错误。

内容的提问来源于stack exchange，提问作者Eduardo Chongkan