React Native Web端jsx语法支持异常问题求助

步骤1：安装依赖 #

先安装customize-cra（扩展react-app-rewired的配置能力）和babel-plugin-react-native-web（适配RN代码到Web环境）：

yarn add customize-cra babel-plugin-react-native-web --dev

步骤2：配置config-overrides.js #

如果项目根目录没有这个文件，直接新建，添加以下内容，让Babel转译react-native-pell-rich-editor库：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve(__dirname, 'src'), // 你的项目源码目录
    path.resolve(__dirname, 'node_modules/react-native-pell-rich-editor') // 指定转译该第三方库
  ])
);

步骤3：修正Babel配置 #

确保babel.config.js包含正确的预设和插件，示例配置如下：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    'module:metro-react-native-babel-preset' // 保留RN原生预设，不影响Android端运行
  ],
  plugins: [
    'react-native-web'
  ]
};

步骤4：清理缓存并重启服务 #

删除Webpack缓存后重启项目，避免缓存导致配置不生效：

rm -rf node_modules/.cache
react-app-rewired start

问题根源 #

默认情况下，基于Create React App的react-app-rewired不会转译node_modules中的第三方库，而react-native-pell-rich-editor是为React Native编写的，其代码里的JSX没有预编译，Web端Babel无法识别。之前修改.babelrc或babel.config.js没生效，就是因为没让Webpack把这个库纳入转译范围。

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