Babel failing on Export default from even when enabled - reactjs

Question

In my React app, I am getting the following error during compilation:
Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled:
1 | export default from './CustomIcon'
|
I have already installed a couple of babel packages, but it did not help. Here is a part of my package.json:
...
"devDependencies": {
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-syntax-export-default-from": "^7.12.1",
"#babel/plugin-syntax-jsx": "^7.12.1",
"#babel/preset-react": "^7.12.7",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
...
And this is the content of my babel.config.json file:
{
"presets": ["#babel/preset-react"],
"plugins": [
"#babel/plugin-syntax-jsx",
"#babel/plugin-proposal-export-default-from"
]
}
What am I doing wrong? Why is my babel configuration ignored? Are there any other steps I need to do?

Answer 1

In case of using create-react-app (CRA), you can't simply add the babel.config.js like that since it has been wrapped by CRA.
But we can achieve that by using package react-app-rewired which is able to modify configuration of CRA.
Here are a few steps you would follow up:
Install deps:
yarn add -D react-app-rewired customize-cra
Add the configuration file at root dir config-overrides.js:
const { useBabelRc, override } = require('customize-cra');
module.exports = override(
useBabelRc(),
);
Test your script by switching to react-app-rewired in your package.json:
{
"start": "react-app-rewired start", // Replace `react-scripts`
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
That's it!