如何配置craco以支持JSX语法，解决实验性语法未启用报错

报错原因 #

默认Create React App的babel-loader仅会转译当前项目根目录内的src文件夹代码，你调用了根目录外的JSX文件时，这些文件没有被babel处理，因此触发JSX语法不支持的报错。

解决配置 #

修改你的craco.config.js如下，核心改动有两处：1. 新增babel的react预设开启JSX转译；2. 扩展babel-loader的处理范围，把外部src路径纳入转译列表：

const path = require('path');
// 替换为你自己的外部源码根路径，推荐用相对路径写法更通用，比如path.resolve(__dirname, '../source/src')
const EXTERNAL_SRC_PATH = path.resolve("C:\\Users\\danie\\Desktop\\Code\\JS\\npm_packages\\source\\src");

module.exports = {
  webpack: {
    alias: {},
    plugins: {
      add: [] /* An array of plugins */,
      remove:
        [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    },
    configure: (webpackConfig, { env, paths }) => {
      // 找到babel-loader配置项，扩展其转译范围
      const babelLoaderRule = webpackConfig.module.rules.find(
        rule => rule.loader && rule.loader.includes('babel-loader')
      );
      if (babelLoaderRule) {
        babelLoaderRule.include = [
          ...(Array.isArray(babelLoaderRule.include) ? babelLoaderRule.include : [babelLoaderRule.include]),
          EXTERNAL_SRC_PATH
        ];
      }
      webpackConfig.entry = path.join(EXTERNAL_SRC_PATH, 'index.js');
      return webpackConfig;
    },
  },
  babel: {
    presets: [
      // 开启JSX转译，React17+用automatic运行时无需手动导入React
      ['@babel/preset-react', { runtime: 'automatic' }]
    ],
    plugins: [],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      return babelLoaderOptions;
    },
  },
};

如果项目中缺少@babel/preset-react依赖，执行以下命令安装即可：
npm i -D @babel/preset-react

注意事项 #

• 若你使用的React版本低于17，需要把preset的runtime参数改为classic，并且所有含JSX的文件顶部都要引入import React from 'react'
• 如果外部文件包含TS/TSX代码，可在babel的presets数组中额外添加@babel/preset-typescript适配
• 配置修改完成后需要重启开发服务生效

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