javascript - 如何配置craco使用jsx？

Question

我正在使用 craco 并试图弄清楚如何配置 jsx。我不断收到以下错误

当前尚未启用对实验性语法“jsx”的支持 (4:17):

他们建议我在插件部分添加 babel/preset-react 或使用 @babel/plugin-syntax-jsx 来启用解析，但我不确定如何做到这一点。

为了澄清，我正在尝试使用react-app根目录之外的src文件夹

craco.config.js

module.exports = {
  webpack: {
    alias: {},
    plugins: {
      add: [] /* An array of plugins */,
      remove:
        [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    },
    configure: {
      /* Any webpack configuration options: https://webpack.js.org/configuration */
    },
    configure: (webpackConfig, { env, paths }) => {
      console.log("WEBPACK");
      console.log(webpackConfig);
      webpackConfig.entry =
        "C:\\Users\\danie\\Desktop\\Code\\JS\\npm_packages\\source\\src\\index.js";
      return webpackConfig;
    },
  },
  babel: {
    presets: [],
    plugins: [],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      console.log("BABEL");
      console.log(babelLoaderOptions);
      return babelLoaderOptions;
    },
  },
};

Answer 1

通过将预设添加到我的配置文件中解决了我的问题

craco.config.js

 babel: {
    presets: ['@babel/preset-react'],
    // plugins: [],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      console.log("BABEL");
      console.log(babelLoaderOptions);
      return babelLoaderOptions;
    },
  },