如何修复Expo中Apollo Client v4的组件类型无效错误？

问题背景 #

从Apollo Client v3迁移到v4时出现「元素类型无效：预期字符串、类或函数，但得到undefined」错误，即使创建最小化Expo项目使用v4也复现该问题。

报错信息 #

Warning: 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. Check the render method of App. This error is located at: Call Stack PersistGate (node_modules\redux-persist\lib\integration\react.js) Provider (node_modules\react-redux\dist\react-redux.legacy-esm.js) App (App.js)
ERROR [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.

Check the render method of App.]

相关代码 #

App.js #

import React from "react";
import { Text } from "react-native";
import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  ApolloProvider,
} from "@apollo/client";

const client = new ApolloClient({
  link: new HttpLink({ uri: "https://countries.trevorblades.com" }),
  cache: new InMemoryCache(),
});

export default function App() {
  return (
    <ApolloProvider client={client}>
      <Text>✅ Apollo Client works fine</Text>
    </ApolloProvider>
  );
}

index.js #

import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

package.json #

{
  "name": "apollo_test2",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@apollo/client": "^4.0.7",
    "expo": "^54.0.12",
    "expo-status-bar": "~3.0.8",
    "graphql": "^16.11.0",
    "react": "19.1.0",
    "react-native": "0.81.4",
    "rxjs": "^7.8.2"
  },
  "private": true
}

解决步骤 #

1. 降级React版本
   React 19属于测试版本，Apollo Client v4早期版本（如4.0.7）对其兼容性不足。将react版本改为18.x稳定版，修改package.json后执行npm install或yarn install：

   "react": "18.2.0",
   "react-native": "0.74.3" // 对应Expo 54兼容的react-native版本
   

2. 更新Apollo Client到最新兼容版本
   旧版Apollo Client可能与Expo 54存在适配问题，升级到v4.x最新稳定版：

   npm install @apollo/client@latest
   

3. 清理项目缓存
   报错中出现未安装的redux-persist相关调用，大概率是缓存残留导致。执行以下命令清理：

   • 删除node_modules文件夹
   • 删除package-lock.json或yarn.lock
   • 执行npm cache clean --force
   • 重新安装依赖：npm install

4. 验证导入正确性
   确认ApolloProvider的导入方式正确，从@apollo/client中命名导入，确保没有混用默认导入和命名导入。

内容的提问来源于stack exchange，提问作者Ahmed Elselly