Custom Babel Config

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

• Transform syntax
• Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
• Source code transformations (codemods)

Configuration File

Blitz adds the blitz/babel preset to new apps via the babel.config.js file in the app root. This preset contains everything needed to compile React applications and server-side code, including source code transformations that enable the import and use of server code directly in your UI components.

If you want to extend the default Babel configs, this is possible. The babel.config.js at the top of your app is considered the source of truth, and therefore it needs to define what Blitz needs as well, which is the blitz/babel preset.

Here's the default example blitz.config.js file:

module.exports = {
  presets: ["blitz/babel"],
  plugins: [],
}

You can take a look at this file to learn about the presets included by blitz/babel.

To add presets/plugins without configuring them, you can do it this way:

module.exports = {
  presets: ["blitz/babel"],
  plugins: ["@babel/plugin-proposal-do-expressions"],
}

To add presets/plugins with custom configuration, do it on the blitz/babel preset like so:

module.exports = {
  presets: [
    "blitz/babel",
    {
      "preset-env": {},
      "transform-runtime": {},
      "styled-jsx": {},
      "class-properties": {},
    },
  ],
  plugins: [],
}