React Native运行iOS报错：发现重复__self属性，如何解决？

你遇到的问题是因为React Native启用JSX自动运行时后，旧的transform-react-jsx-self和transform-react-jsx-source插件会自动注入__self和__source属性，导致重复冲突。即使你没手动配置这两个插件，也可能是依赖或预设间接引入的，以下是具体解决步骤：

• 检查并修正Babel配置
  确保你的babel.config.js使用React Native官方推荐的预设，这个预设默认不会包含废弃的JSX插件：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
  };
  

  如果之前用的是@babel/preset-react-native或旧版babel-preset-react-native，直接替换成上述配置即可。

• 清理Metro缓存
  缓存残留可能导致旧配置生效，执行以下命令重置缓存后重启服务：

  npx react-native start --reset-cache
  

  之后再重新运行npx react-native run-ios。

• 排查依赖中的隐含引入
  有些第三方依赖可能会间接引入这两个废弃插件，用以下命令查找来源：

  # npm用户
  npm ls transform-react-jsx-self
  # yarn用户
  yarn why transform-react-jsx-self
  

  找到对应的依赖后，要么升级该依赖到兼容JSX自动运行时的版本，要么移除不必要的依赖。

• 强制禁用废弃插件（兜底方案）
  如果以上方法都无效，在babel.config.js中明确禁用这两个插件：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['transform-react-jsx-self', false],
      ['transform-react-jsx-source', false],
    ],
  };
  

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