How to configure craco to use jsx?

I am using craco and trying to figure out how to configure jsx. I keep getting the following error

Support for the experimental syntax 'jsx' isn't currently enabled (4:17):

They suggest that I add `babel/preset-react or use @babel/plugin-syntax-jsx to the plugin section to enable parsing but I’m unsure how to do that.

To clarify, I am trying to use a src folder outside the root of my react-app

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

Figured out my issue by adding the preset to my config file

craco.config.js

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

Advertisement

Answer