This is a common babel preset that can be used for all Planning Center Apps.

Usage

yarn add @planningcenter/babel-preset

Then add the preset to your babel config in babel.config.json:

{
  "presets": ["@planningcenter"]
}

You can remove all references to basic babel plugins and presets. This is also responsible for making sure that you have a current working version of @babel/core and @babel/runtime.

Options

useClassicJSXRuntime (default: false)

By default, this preset will use React's runtime to transform JSX. This runtime is available in React ^17, ^16.4.0, ^15.7.0, and ^0.14.10. If you are on an older version of React, you will either need to upgrade or use this setting.

presetReactImportSource (default: "react")

This option allows overriding the importSource option for @babel/preset-react. Useful if using emotion, for example.