Expo项目Web端运行编译失败，react-native-otp-input模块解析报错

错误根因 #

@twotalltotems/react-native-otp-input发布的包未提前编译JSX语法，Expo Web的Babel默认不会处理node_modules下的第三方包代码，导致Webpack无法识别这类React Native JSX标签。之前仅配置@twotalltotems会转译整个scope下的所有包，容易引发依赖冲突，所以会出现更复杂的报错。

解决方案 #

方案1：修正Babel转译配置 #

1. 修改app.json配置，精准指定要转译的包名，原有其他配置保持不变：

{
  "expo": {
    "web": {
      "build": {
        "babel": {
          "include": [
            "@twotalltotems/react-native-otp-input"
          ]
        }
      }
    }
  }
}

2. 清理缓存重启项目，执行命令：
   npx expo start --clear --web

方案2：替换兼容Web的OTP组件 #

如果方案1仍报错，直接替换为原生支持Web端的OTP输入库：

• 卸载原有库：npm uninstall @twotalltotems/react-native-otp-input
• 安装兼容库：npm install react-native-otp-entry
  该库API与原有库基本一致，无需额外适配即可在Web、iOS、Android三端正常运行。

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