React-app-rewired: Optional Chaining Plugin doesn't work

[InsOpDe]

As Typescript 3.7.0 is released id like to use optional-chaining.

Im getting the error:

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

This is my config-overrides.js

const { // eslint-disable-line
    override,
    fixBabelImports,
    addLessLoader,
    addExternalBabelPlugins,
    useEslintRc,
    addDecoratorsLegacy,
    addWebpackModuleRule
} = require("customize-cra"); // eslint-disable-line import/no-extraneous-dependencies
const antdTheme = require("./src/theme.ts");
module.exports = override(
    addDecoratorsLegacy(),
    ...addExternalBabelPlugins(
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-transform-destructuring"
    ),
    useEslintRc(),
    /* Doesnt seem to work.. */
    addWebpackModuleRule({
        test: /\.json$/,
        loader: "json"
    }),
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: antdTheme
    })
);

These are my dependencies:

• "typescript": "^3.7.2"
• "@babel/plugin-proposal-optional-chaining": "^7.7.4",
• "@babel/plugin-transform-destructuring": "^7.6.0",
• "@typescript-eslint/eslint-plugin": "^2.9.0",
• "@typescript-eslint/parser": "^2.9.0",
• "awesome-typescript-loader": "^5.2.1",
• "babel-plugin-import": "^1.12.0",
• "customize-cra": "^0.9.1",

What am I missing?

[dawnmist]

Given that you're exclusively using functions/syntax from customize-cra, you may be better off asking this question there.

Two possible suggestions (coming from only just reading the api docs, not from any personal use of customize-cra, so they could absolutely be wrong) would be:

• Try addBabelPlugins instead of addExternalBabelPlugins - _if_ I've read the docs at customize-cra correctly, the addBabelPlugins looks like it applies the plugins when compiling files in your src directory, whereas addExternalBabelPlugins looks like it applies the plugins when compiling files in the node_modules directory. So your config may be simply adding the plugins against the wrong files.
• Consider using useBabelRc instead - this allows the plugins to be applied to tests as well as start/build, whereas all the add*BabelPlugins functions affect only start/build.

[with-heart]

customize-cra maintainer here. Sorry that our issues tend to bleed over. I started watching issues here awhile back to try to catch customize-cra-specific issues.

@dawnmist is correct about addBabelPlugins: addBabelPlugins applies to files in the src directory while addExternalBabelPlugins applies to files outside of src.

This should work fine if you follow either of her suggestions. If not, please open an issue for customize-cra.

[InsOpDe]

Yes addBabelPlugins did it. Sorry for not carefully reading your docs! Thank you for your exuberant help! :)

[djstein]

@InsOpDe could you post an example of your config and babel.config.js for those of us getting here from searches!

[InsOpDe]

@djstein I did not use a babel.config.js but used addBabelPlugins in the config-overrides.js like so:

/* Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra */
const { // eslint-disable-line
    override,
    fixBabelImports,
    addLessLoader,
    addBabelPlugins,
    useEslintRc,
    addDecoratorsLegacy,
    addWebpackModuleRule
} = require("customize-cra"); // eslint-disable-line import/no-extraneous-dependencies
const antdTheme = require("./src/theme.ts");
module.exports = override(
    addDecoratorsLegacy(),
    ...addBabelPlugins(
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-transform-destructuring"
    ),
    useEslintRc(),
    /* Doesnt seem to work.. */
    addWebpackModuleRule({
        test: /\.json$/,
        loader: "json"
    }),
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: antdTheme
    })
);