babel-preset-expo

55.0.18 verified Sat Apr 25 auth: no javascript

The official Babel preset for Expo projects, enabling JSX, modern JavaScript, and React Native / web support. Current stable version is 55.0.18. Updated regularly alongside Expo SDK releases. Automatically configures transforms for Expo modules, React Native, and React Native Web. Differentiators: seamless integration with Expo toolchain, automatic platform detection (ios/android/web), and optimized settings for Metro bundler. Requires @babel/runtime and react-refresh for development reloading.

Common errors

error Requires Babel 7.12+ ↓

cause Using an older Babel version (<7.12)

fix

Upgrade Babel packages to ^7.12.0 or later.

error Cannot find module '@babel/runtime/helpers/interopRequireDefault' ↓

cause Missing @babel/runtime dependency

fix

Run: npm install @babel/runtime

error Unknown plugin 'transform-remove-console' ↓

cause Removed in v55; use 'expo-remove-console' plugin instead

fix

Replace 'transform-remove-console' with 'expo-remove-console' in plugins list.

Warnings

breaking In v55, expo-widgets peer dependency was added. Projects without expo-widgets may fail to install. ↓

fix Add 'expo-widgets': '^55.0.14' to dependencies, or install expo-widgets

deprecated The 'lazyImports' option is deprecated. Use 'rewriteImportPath' instead. ↓

fix Replace 'lazyImports' with 'rewriteImportPath' in preset options.

gotcha Using babel-preset-expo with plain React (not React Native) may cause unexpected transforms for JSX and platform-specific code. ↓

fix For web-only projects, set platform: 'web' explicitly. For React DOM projects, consider using @babel/preset-react instead.

breaking In v50, the preset stopped bundling @babel/runtime. You must install @babel/runtime separately. ↓

fix Run npm install @babel/runtime --save (or --save-dev)

Install

npm install babel-preset-expo

yarn add babel-preset-expo

pnpm add babel-preset-expo

Imports

default

wrong

import babelPresetExpo from 'babel-preset-expo'

correct

module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'] }; }

Used in babel.config.js, not imported in app code. Common mistake: trying to import in JavaScript.

function

wrong

module.exports = { presets: ['babel-preset-expo'] }

correct

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Must call api.cache() in Babel config. Omitting api.cache() can cause performance issues or stale cache.

default

wrong

Using .babelrc with invalid JSON or missing presets array

correct

.babelrc
{
  "presets": ["babel-preset-expo"]
}

Also works in .babelrc; ensure valid JSON.

Quickstart

Configures Expo Babel preset in babel.config.js with optional platform override and comments on available options.

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: [['babel-preset-expo', {
      // Options: 'ios', 'android', 'web', or 'react-native' (default auto-detects)
      // Uncomment to override:
      // platform: 'web',
      // react-compiler: false, // enable React Compiler (experimental)
    }]],
    plugins: [
      // Additional plugins
    ],
  };
};