安装react-native-speedometer-chart模块时遇Unexpected token '<'错误求助

老哥，你踩了个常见的坑——你装的react-native-speedometer-chart是React Native专属的图表库，根本不是给React Web（也就是你用的ReactJS）项目设计的！报错的原因其实很明确：

• 库里面用了React Native独有的<Text>组件，Web环境根本不认识这个东西
• 这个库的源代码没做编译，而React Web项目的Babel默认不会去处理node_modules里的JSX代码，所以解析到<Text>标签时直接炸了，报出Unexpected token错误

最省心的解决方案：换用Web兼容的速度计库 #

别死磕这个RN库了，直接换个专门支持React Web的速度计组件就行，比如react-speedometer或者recharts里的仪表盘组件，这里给你举个react-speedometer的例子：

步骤1：安装依赖 #

npm install react-speedometer --save
# 用yarn的话就是
yarn add react-speedometer

步骤2：在组件里使用 #

import React from 'react';
import Speedometer from 'react-speedometer';

function MySpeedoChart() {
  return (
    <Speedometer
      value={75} // 显示的数值
      maxValue={100} // 最大值
      segments={5} // 分段数
      needleColor="#e74c3c" // 指针颜色
    />
  );
}

export default MySpeedoChart;

备选方案：硬把RN库适配到Web（不推荐） #

如果你非要用这个react-native-speedometer-chart，那得做一堆配置来让Web环境兼容，过程很麻烦还容易出问题：

1. 先装react-native-web，它能模拟React Native的核心组件：

npm install react-native-web --save

2. 修改Babel配置，让它处理这个库的JSX代码：
   在项目根目录的babel.config.js（没有就新建）里加这段：

module.exports = {
  presets: [/* 你原来的presets，比如react-app */],
  overrides: [
    {
      test: /node_modules\/react-native-speedometer-chart\/.*/,
      presets: ['module:metro-react-native-babel-preset'],
    },
  ],
};

3. 配置Webpack把react-native指向react-native-web：
   如果是Create React App创建的项目，你得先eject或者用craco来改Webpack配置，添加别名：

resolve: {
  alias: {
    'react-native': 'react-native-web',
  },
}

友情提示：这种适配方式大概率会出现样式乱掉、组件行为不符合预期的问题，真心不如直接换Web专属的库来得痛快。

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