React-App- Rewired won't add Babel Plugin

Question

So I am trying to run react-native using react-native-web. It requires some babel plugins to be added.

My app was created using react-app-rewired. I have tried several ways to add the babel plugin, however, with no success.

I am using a config-overrides.js file that looks like this:

const { override, addBabelPlugins, addDecoratorsLegacy, fixBabelImports } = require('customize-cra');

const addHandleBarsLoader = config => {
    // add handlebars-loader so that handlebars templates in
    // webpack-dev-server's served html files are parsed
    // (specifically the meta tags)
    config.module.rules.push({ test: /\.html$/, loader: 'handlebars-loader' });
    return config;
}


module.exports = override(
    addHandleBarsLoader,
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }),addBabelPlugins('@babel/plugin-proposal-class-properties'),
);

I know the other config override works, however the babel keeps ignoring the new plugin (which is installed, as well as everything else).

Also, I am building the app through the react-app-rewired build.

That is the error message I get while it tries to build

./node_modules/rn-bottom-drawer/src/BottomDrawer.js
SyntaxError: /Users/admin/Documents/Meirim/Workspace/meirim/node_modules/rn-bottom-drawer/src/BottomDrawer.js: Support for the experimental syntax 'classProperties' isn't currently enabled (13:20):

  11 |
  12 | export default class BottomDrawer extends Component{
> 13 |   static propTypes = {
     |                    ^
  14 |     /**
  15 |      * Height of the drawer.
  16 |      */

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel configto enable transformation.

Many thanks(:

Gal

Answer 1

Found the solution, simply use a function called addExternalBabelPlugin instead