仅支持iOS/Android的React Native库引发Web端编译失败如何解决？

这类报错属于React Native多端开发的常见场景：仅适配iOS/Android端的React Native第三方库，发布时不会提前将源码中的JSX语法转译为标准JS语法，而Web端的默认Babel配置不会处理node_modules目录下的文件，因此编译时会直接识别到未转译的JSX语法抛出错误。

按你的实际场景选择以下方案即可：

• 方案1：配置转译白名单
  修改项目Babel配置，添加@babel/preset-react预设和@babel/plugin-syntax-jsx插件，同时将需要兼容Web端的第三方库加入转译范围。
  示例babel.config.js配置：

  module.exports = {
    presets: [
      'module:metro-react-native-babel-preset',
      '@babel/preset-react'
    ],
    plugins: ['@babel/plugin-syntax-jsx']
  }
  

  如果使用Webpack打包Web端，同步修改webpack.config.js的babel-loader规则，将指定依赖移出排除范围：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          // 仅排除除指定RN库外的其他node_modules文件
          exclude: /node_modules\/(?!(react-native-animatable|react-native-modals)\/)/,
          use: ['babel-loader']
        }
      ]
    }
  }
  

• 方案2：多端别名替换
  针对完全不支持Web端的RN库，可以在Web打包配置中设置别名，用自研的Web端兼容组件直接替换原库。以Webpack为例：

  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        'react-native-modals': path.resolve(__dirname, './src/components/WebModal/index.js')
      }
    }
  }
  

  只需保证替换的组件和原RN库对外暴露的API、入参一致，业务代码无需额外修改即可正常运行。
• 方案3：条件引入依赖
  在业务代码中通过平台判断逻辑，不同平台加载不同的依赖实现：

  import { Platform } from 'react-native';
  
  let CustomModal;
  if (Platform.OS === 'web') {
    // 引入Web端兼容的弹窗组件
    CustomModal = require('./components/WebModal').default;
  } else {
    // 移动端引入原RN库组件
    CustomModal = require('react-native-modals').Modal;
  }
  

内容的提问来源于stack exchange，提问作者Er.Rohit Sharma