React项目中react-native-input-spinner编译失败：JSX语法不支持问题

你的项目基于Create React App（使用react-scripts），它默认不会编译node_modules目录下的代码，而react-native-input-spinner的源码包含未转译的JSX，导致Babel无法处理该组件的语法，从而抛出错误。

1. 安装配置工具 #

安装react-app-rewired和customize-cra，用于覆盖Create React App的默认Babel配置：

npm install --save-dev react-app-rewired customize-cra

2. 创建自定义配置文件 #

在项目根目录（与package.json同级）新建config-overrides.js文件，内容如下：

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

module.exports = override(
  babelInclude([
    path.resolve(__dirname, 'src'),
    // 指定让Babel编译react-native-input-spinner的源码
    path.resolve(__dirname, 'node_modules/react-native-input-spinner')
  ])
);

3. 修改项目启动脚本 #

在package.json中替换原有的scripts配置，改用react-app-rewired执行命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 清理缓存并重启项目 #

删除缓存目录后重启项目，确保配置生效：

rm -rf node_modules/.cache
npm start

react-native-input-spinner是为React Native环境开发的组件，在web项目中使用可能会依赖React Native专属API（如View、TextInput等），这些API在web环境中不存在。如果编译通过后出现新的运行错误，建议：

• 替换为web端专用的数值步进组件（如react-number-input或MUI的TextField搭配自定义步进按钮）
• 或安装react-native-web来兼容React Native组件，但会增加项目复杂度

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