Babel failing on Export default from even when enabled

user_1942656 0
Viewed 296

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?

babeljs reactjs
1 Answers

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!

user_31042260
Related