Blitz is pivoting to framework agnostic toolkit. Click to learn more.
🚀Announcing Flightcontrol - Easily Deploy Blitz.js and Next.js to AWS 🚀
Back to Documentation Menu

Custom Babel Config


Jump to a Topic

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: [
      "preset-env": {},
      "transform-runtime": {},
      "styled-jsx": {},
      "class-properties": {},
  plugins: [],

To learn more about the available options for each config, visit their documentation site.

Blitz uses the current Node.js version for server-side compilations.


The modules option on "preset-env" should be kept to false, otherwise webpack code splitting is turned off.

Idea for improving this page? Edit it on GitHub.