使用react-group-table库时遇Babel JSX语法未启用构建错误求助

问题根源 #

该库发布的源码包含未转译的JSX语法，而你的项目Babel配置未处理node_modules/react-group-table目录，或缺少React语法转译预设，导致构建时无法解析JSX。

可行修复方案 #

方案1：配置Babel处理该库（推荐）

1. 安装React语法转译预设

   npm install @babel/preset-react --save-dev
   # 或使用yarn
   yarn add @babel/preset-react -D
   

2. 修改Babel配置文件（如babel.config.json或.babelrc）
   添加React预设，并指定包含该库目录：

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"],
     "include": [
       "./src/**/*",
       "./node_modules/react-group-table/**/*"
     ]
   }
   

   若使用Webpack，需同步修改babel-loader的include规则：

   const path = require('path');
   
   module.exports = {
     // ...其他配置
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           loader: 'babel-loader',
           include: [
             path.resolve(__dirname, 'src'),
             path.resolve(__dirname, 'node_modules/react-group-table')
           ],
           exclude: /node_modules\/(?!react-group-table)/
         }
       ]
     }
   };
   

方案2：添加JSX语法解析插件（临时应急）

仅启用JSX语法解析，不转译，适合快速验证：

1. 安装插件

   npm install @babel/plugin-syntax-jsx --save-dev
   # 或使用yarn
   yarn add @babel/plugin-syntax-jsx -D
   

2. 修改Babel配置

   {
     "plugins": ["@babel/plugin-syntax-jsx"]
   }
   

方案3：直接引用预编译产物（若存在）

检查该库是否提供预编译的dist目录，若有，修改导入路径为预编译文件：

import GroupTable from 'react-group-table/dist/groupTable';

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