How to add option for babel loader in customize-cra?

user_433570 0
Viewed 3880

I'm hitting Support for the experimental syntax 'classProperties' isn't currently enabled

I need to add something like the following to my webpack config.

https://github.com/babel/babel/issues/8655

{
  loader: 'babel-loader',
  options: {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      {
        "plugins": [
          "@babel/plugin-proposal-class-properties"
        ]
      }
    ],
  },
}

Although I'm using customize-cra and need to add it through config-overrrides.js and I tried

 module.exports = override(
   ...addBabelPresets("@babel/preset-env", "@babel/preset-react"),
   ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
   # other lines omitted for brevity
)
babeljs react-native create-react-app
2 Answers

Try defining the plugins and presets in a .babelrc file, use the useBabelRc loader in your config:

//config-override.js
const { useBabelRc, override } = require("customize-cra");
    
module.exports = override(
    useBabelRc()
);

and then in the .babelrc

//.babelrc
const presets = ["@babel/preset-env","@babel/preset-react"]

const plugins = [
    ["@babel/plugin-proposal-class-properties"]
];

module.exports = {
    presets,
    plugins,
};
user_105736150 
//config-override.js
const { useBabelRc, override } = require("customize-cra");
    
module.exports = override(
    useBabelRc()
);

//.babelrc
{
  "presets": [
    ["@babel/preset-react"],
    ["@babel/preset-env"]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
user_147450900
Related