使用victory-native添加柱状图时出现Element type is invalid错误求助

AI 小北

2026-7-7

问题

在Expo项目中使用victory-native库添加柱状图，按入门指南编写代码后出现以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

已尝试删除node_modules和yarn.lock后重新执行yarn install，错误仍存在；移除victory组件代码后页面可正常显示。

代码示例

import React from "react";
import { StyleSheet, View } from "react-native";
import { VictoryBar, VictoryChart } from "victory-native";

export default function Homepage() {
  const data = [
    { quarter: 1, earnings: 13000 },
    { quarter: 2, earnings: 16500 },
    { quarter: 3, earnings: 14250 },
    { quarter: 4, earnings: 19000 },
  ];
  return (
    <View style={styles.container}>
      <VictoryChart width={350}>
        <VictoryBar data={data} x="quarter" y="earnings" />
      </VictoryChart>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5fcff",
  },
});

依赖配置

"expo": "~49.0.15",
"react": "18.2.0",
"react-native": "0.72.6",
"@shopify/react-native-skia": "0.1.196",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-svg": "13.9.0",
"victory-native": "^40.0.2",

解决步骤

降级victory-native版本：victory-native v40+ 与Expo 49兼容性存在问题，建议安装兼容版本：
```
yarn add victory-native@36.6.11
```

修正组件导入路径：部分版本中直接从根库导入会出现导出问题，改为从子路径导入：

import VictoryChart from "victory-native/src/components/VictoryChart/VictoryChart";
import VictoryBar from "victory-native/src/components/VictoryBar/VictoryBar";