引入simple-timepicker-react启动项目报错：需适配对应loader处理文件类型

这个错误的核心原因很明确：你安装的simple-timepicker-react包没有预编译成浏览器可直接运行的JavaScript代码，而是直接发布了JSX源码。而你的构建工具（比如Webpack或Create React App）默认不会转译node_modules目录下的文件，导致Babel无法处理这个包里的JSX语法，所以才会报“意外标记”的错误。

下面分两种场景给出解决方案：

场景1：手动配置Webpack的项目 #

修改你的Webpack配置文件，让Babel-loader处理simple-timepicker-react的源码：

1. 找到Webpack配置中处理.js/.jsx文件的规则
2. 调整exclude选项，把simple-timepicker-react排除在“不处理”的列表之外，示例配置如下：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      // 排除node_modules里除了simple-timepicker-react之外的所有包
      exclude: /node_modules\/(?!simple-timepicker-react)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }
    }
  ]
}

修改完成后重启你的开发服务器即可。

场景2：使用Create React App（CRA）的项目 #

CRA默认不允许直接修改Webpack配置，我们可以借助react-app-rewired和customize-cra来覆盖配置：

1. 先安装依赖：

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

2. 在项目根目录创建config-overrides.js文件，添加以下内容：

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

module.exports = override(
  babelInclude([
    path.resolve(__dirname, 'src'), // 保留原有的src目录处理
    path.resolve(__dirname, 'node_modules/simple-timepicker-react') // 新增处理这个包
  ])
);

3. 修改package.json里的启动脚本，替换成react-app-rewired：

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

4. 最后重启开发服务器：

npm start

这样就能让Babel正确转译simple-timepicker-react的JSX代码，解决模块解析失败的问题了。

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