React Native 0.74.5+GraphQL Codegen报错：undefined is not a function

问题背景 #

基于React Native 0.74.5开发的项目，使用GraphQL Codegen生成类型与hooks时，出现「undefined is not a function」错误导致应用无法启动。已尝试删除生成文件重生成、重装依赖、配置Metro支持cjs文件，但问题未解决。

可能的原因与解决方案 #

1. 调整Codegen的模块导入配置 #

React Native 0.74+默认支持ES模块，emitLegacyCommonJSImports: true会强制生成CommonJS风格的导入，容易和RN的模块系统冲突。同时optimizeDocumentNode选项在RN环境下可能引发未定义函数问题，建议调整：

修改codegen.ts中的关键配置：

const config: CodegenConfig = {
  // ...其他原有配置
  emitLegacyCommonJSImports: false, // 关闭CommonJS导入生成
  generates: {
    'src/graphql/index.ts': {
      plugins: [
        {
          'fragment-matcher': {
            useExplicitTyping: true,
            // 移除module: 'es2015'配置，让插件适配当前模块系统
          },
        },
        {
          'typescript-react-apollo': {
            dedupeFragments: true,
            optimizeDocumentNode: false, // 先禁用该优化选项
            addDocBlocks: false,
            withComponent: false,
            withHooks: true,
            withMutationOptionsType: false,
          },
        },
      ],
    },
    // ...其他generates配置
  },
};

修改完成后，删除旧的生成文件，重新执行Codegen命令生成代码。

2. 调整Metro的文件解析顺序 #

Metro的sourceExts顺序会影响文件优先级，确保TypeScript相关后缀排在前面，避免解析错误：

修改metro.config.js的resolver部分：

resolver: {
  assetExts: assetExts.filter(ext => ext !== 'svg'),
  sourceExts: process.env.RN_SRC_EXT
    ? [...process.env.RN_SRC_EXT.split(','), 'tsx', 'ts', 'jsx', 'js', 'svg', 'cjs']
    : ['tsx', 'ts', 'jsx', 'js', 'svg', 'cjs'],
},

3. 检查生成代码中的未定义函数 #

打开生成的src/graphql/index.ts文件，根据错误栈定位到报错的函数调用位置，确认是否存在：

• 函数未正确导入（比如Apollo Client相关工具函数）
• fragment matcher生成的代码存在语法或导入错误

如果发现是fragment matcher的问题，可以尝试暂时移除该插件，先确认基础的hooks生成是否正常，再逐步添加插件排查。

4. 确认依赖版本兼容性 #

确保@graphql-codegen/cli、@graphql-codegen/typescript-react-apollo等插件版本与React Native 0.74.5、Apollo Client版本匹配。比如使用Apollo Client 3.x时，需确保Codegen插件为对应兼容版本，避免因版本不匹配导致的函数未定义问题。

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