React Native构建后报TypeError: Cannot read property 'displayName' of undefined求助

1. 核对ESLint/Prettier依赖与React Native版本兼容性 #

React Native 0.71.6对ESLint相关插件有特定版本要求，先检查package.json中的依赖版本：

• 重点确认eslint、eslint-plugin-react、eslint-plugin-react-native、@typescript-eslint/eslint-plugin的版本，避免版本过高或过低引发冲突
• 执行npm list eslint-plugin-react-native或yarn list eslint-plugin-react-native查看实际安装版本，若不兼容，降级/升级到适配0.71.6的版本（推荐eslint-plugin-react-native ^4.0.0系列）

2. 检查ESLint规则配置 #

react/display-name规则配置不当可能触发该错误：

• 打开.eslintrc.js/.eslintrc.json，查看是否开启了该规则，尝试调整配置：

  rules: {
    "react/display-name": ["warn", { ignoreTranspilerName: true }]
  }
  

• 临时禁用该规则（设为"off"），重新构建应用，验证错误是否消失，以此确认是否为该规则导致

3. 排查Expo Hermes引擎配置 #

Hermes与ESLint转译逻辑可能存在冲突：

• 打开app.json/app.config.js，确认jsEngine设置为hermes：

  "expo": {
    "jsEngine": "hermes"
  }
  

• 临时切换到jsc引擎，重新构建项目，判断错误是否与Hermes直接相关

4. 清理缓存并重新构建 #

缓存残留可能导致配置异常：

• 执行expo r -c清理Expo缓存并重启项目
• 删除node_modules、package-lock.json/yarn.lock，重新执行npm install或yarn install

5. 检查TypeScript配置 #

TSConfig的不当设置可能引发转译问题：

• 打开tsconfig.json，确认compilerOptions中的关键配置：

  "compilerOptions": {
    "jsx": "react-native",
    "target": "esnext"
  }
  

6. 验证Prettier与ESLint集成配置 #

集成插件的冲突也可能导致异常：

• 检查.prettierrc/prettier.config.js，确保没有修改React Native组件结构的不当配置
• 确认eslintrc中extends数组最后包含prettier，避免规则冲突：

  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-native/all",
    "prettier"
  ]
  

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