使用子路径导入
从 @heroui-pro/react 导入组件时，请使用子路径导入以避免依赖解析错误。
问题
从主入口导入组件时：
import { AreaChart, ChartTooltip } from "@heroui-pro/react";Vite 会报错，提示找不到 shiki、marked、react-markdown 等依赖：
Failed to resolve import "shiki" from "node_modules/.vite/deps/@heroui-pro_react.js"原因
@heroui-pro/react 的主入口（dist/index.js）将所有组件 re-export 到一个文件中。当你从主入口导入时，Vite 必须解析整个 bundle，包括你根本没用到的组件的依赖（shiki 属于 code-block，marked 属于 markdown，等等）。
解决方案
使用子路径导入，只引入你需要的组件：
// ✅ 正确 — 子路径导入
import { AreaChart } from "@heroui-pro/react/area-chart";
import { ChartTooltip } from "@heroui-pro/react/chart-tooltip";所有可用的子路径在包的 exports 字段中定义，格式为 @heroui-pro/react/<组件名>，例如：
@heroui-pro/react/area-chart@heroui-pro/react/bar-chart@heroui-pro/react/chart-tooltip@heroui-pro/react/code-block@heroui-pro/react/markdown@heroui-pro/react/sidebar- ……
子路径列表
以下是目前所有可用的子路径导入：
| 子路径 | 组件 |
|---|---|
action-bar | ActionBar |
agenda | Agenda |
app-layout | AppLayout |
area-chart | AreaChart |
bar-chart | BarChart |
carousel | Carousel |
cell-color-picker | CellColorPicker |
cell-select | CellSelect |
cell-slider | CellSlider |
cell-switch | CellSwitch |
chain-of-thought | ChainOfThought |
chart-tooltip | ChartTooltip |
chat-attachment | ChatAttachment |
chat-conversation | ChatConversation |
chat-list-view | ChatListView |
chat-loader | ChatLoader |
chat-message | ChatMessage |
chat-message-actions | ChatMessageActions |
chat-source | ChatSource |
chat-tool | ChatTool |
checkbox-button-group | CheckboxButtonGroup |
code-block | CodeBlock |
command | Command |
composed-chart | ComposedChart |
context-menu | ContextMenu |
data-grid | DataGrid |
drop-zone | DropZone |
emoji-picker | EmojiPicker |
emoji-reaction-button | EmojiReactionButton |
empty-state | EmptyState |
file-tree | FileTree |
floating-toc | FloatingToc |
hover-card | HoverCard |
inline-select | InlineSelect |
item-card | ItemCard |
item-card-group | ItemCardGroup |
kanban | Kanban |
kpi | KPI |
kpi-group | KPIGroup |
line-chart | LineChart |
list-view | ListView |
markdown | Markdown |
native-select | NativeSelect |
navbar | Navbar |
number-stepper | NumberStepper |
number-value | NumberValue |
pie-chart | PieChart |
pressable-feedback | PressableFeedback |
prompt-input | PromptInput |
prompt-suggestion | PromptSuggestion |
radar-chart | RadarChart |
radial-chart | RadialChart |
radio-button-group | RadioButtonGroup |
rating | Rating |
resizable | Resizable |
segment | Segment |
sheet | Sheet |
sidebar | Sidebar |
stepper | Stepper |
text-shimmer | TextShimmer |
trend-chip | TrendChip |
widget | Widget |
How is this guide?
Last updated on