How can I change my Ionic React babel config?

user_9044620 0
Viewed 810

I want to add some babel plugins to an Ionic React project. I don't see this info anywhere in the Ionic docs.

I know Ionic React is new, but has anyone figured this out or done something like this for Ionic Angular?

ionic-framework
1 Answers

Ionic-React uses create-react-app under the hood for react, so it behaves just like it. You most probably will have to eject to use custom configuration.

If you want to avoid ejecting, there is a workaround to get your custom babel config working with create-react-app.

  1. Install react-app-rewired and customize-cra. (yarn/npm)
    yarn add -D react-app-rewired customize-cra
  1. Create config-overrides.js at your root project directory and add these lines
    // config-overrides.js
    module.exports = override(
      useBabelRc()
    );
  1. Change package.json like this

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
    }
  1. Add .babelrc in your root project to override cra's default babel config and you are good to go.
    // .babelrc
    {
      "plugins":[]
    }

Caution: It will override the default behavior and configuration of creat-react-app, so I am not exactly sure if it can be used safely with ionic react. Things may break.

user_112698390
Related