or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdperformance-optimizations.mdplatform-options.mdpreset-configuration.mdreact-compiler.mdserver-components.md
tile.json

tessl/npm-babel-preset-expo

A comprehensive Babel preset for Expo and React Native projects with advanced features like tree shaking, React Server Components, and platform-specific optimizations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-preset-expo@14.0.x

To install, run

npx @tessl/cli install tessl/npm-babel-preset-expo@14.0.0

index.mddocs/

babel-preset-expo

babel-preset-expo is a comprehensive Babel preset designed specifically for Expo and React Native projects. It extends the default React Native preset with advanced features including tree shaking, bundle splitting, React Server Components support, Hermes compilation optimization, dead-code elimination, and modern development tools integration.

Package Information

  • Package Name: babel-preset-expo
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install babel-preset-expo

Core Imports

The preset is used in Babel configuration files, not imported directly in application code:

// babel.config.js
module.exports = {
  presets: ['babel-preset-expo']
};

For TypeScript configurations or programmatic usage:

import type { BabelPresetExpoOptions } from 'babel-preset-expo';
import babelPresetExpo from 'babel-preset-expo';

With options:

module.exports = {
  presets: [
    ['babel-preset-expo', {
      // Configuration options
      jsxRuntime: 'automatic',
      reanimated: true,
      web: { /* web-specific options */ },
      native: { /* native-specific options */ }
    }]
  ]
};

Basic Usage

// babel.config.js - Minimal setup
module.exports = {
  presets: ['babel-preset-expo']
};

// With platform-specific configuration
module.exports = {
  presets: [
    ['babel-preset-expo', {
      jsxRuntime: 'automatic', // Use React 17+ automatic JSX
      reanimated: true, // Enable Reanimated plugin
      web: {
        disableImportExportTransform: true // Enable tree shaking on web
      },
      native: {
        lazyImports: true // Enable lazy imports on native
      }
    }]
  ]
};

Architecture

babel-preset-expo is built around several key components:

  • Platform-Aware Configuration: Different optimizations for web, iOS, and Android platforms
  • React Server Components Support: Client/server boundary handling with specialized plugins
  • Modern JavaScript Features: Automatic JSX runtime, decorators, Flow/TypeScript stripping
  • Performance Optimizations: Tree shaking, lazy imports, dead code elimination
  • Development Tools: React Refresh, React Compiler integration
  • Build-Time Optimizations: Environment variable inlining, Platform.select optimization

Capabilities

Preset Configuration

Core preset function that returns Babel transformation configuration based on platform and options.

function babelPresetExpo(
  api: ConfigAPI, 
  options?: BabelPresetExpoOptions
): TransformOptions;

Preset Configuration

Platform Options

Configuration options for customizing preset behavior per platform or globally.

interface BabelPresetExpoPlatformOptions {
  /** Disable or configure the decorators plugin */
  decorators?: false | { legacy?: boolean; version?: number };
  /** Enable Reanimated plugin (default: true) */
  reanimated?: boolean;
  /** Enable Worklets plugin (default: true) */
  worklets?: boolean;
  /** JSX runtime mode (default: 'automatic') */
  jsxRuntime?: 'classic' | 'automatic';
  /** JSX import source (default: 'react') */
  jsxImportSource?: string;
}

Platform Options

React Compiler Integration

Configuration for babel-plugin-react-compiler with extensive environment options.

interface ReactCompilerOptions {
  enableUseMemoCachePolyfill?: boolean;
  compilationMode?: 'infer' | 'strict';
  panicThreshold?: 'none' | 'all_errors' | 'critical_errors';
  environment?: ReactCompilerEnvironment;
  runtimeModule?: string | null;
}

React Compiler

Performance Optimizations

Build-time optimizations including tree shaking, lazy imports, and environment variable inlining.

interface PerformanceOptions {
  /** Enable lazy imports for better startup performance */
  lazyImports?: boolean;
  /** Disable import/export transform for tree shaking */
  disableImportExportTransform?: boolean;
  /** Transform profile for Hermes optimization */
  unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
  /** Minify typeof window checks */
  minifyTypeofWindow?: boolean;
}

Performance Optimizations

Server Components Support

React Server Components configuration with client/server boundary handling.

interface ServerComponentsSupport {
  /** Server environment detection */
  isServer: boolean;
  /** React Server Components environment */
  isReactServer: boolean;
  /** Transform import.meta polyfill */
  unstable_transformImportMeta?: boolean;
}

Server Components

Web Preset

Simplified Babel preset optimized specifically for web and server-side rendering environments.

function webPreset(
  babel: unknown,
  options?: WebPresetOptions
): BabelPreset;

interface WebPresetOptions {
  /** Disable import/export transform for tree shaking */
  disableImportExportTransform?: boolean;
  /** Lazy import/export transform configuration */
  lazyImportExportTransform?: any;
  /** Enable Babel runtime helpers */
  enableBabelRuntime?: boolean;
}

Internal preset used automatically when platform === 'web' or in server environments.

Constants

Lazy Import Blacklist

Set of packages that should not be lazily initialized due to side effects.

export const lazyImports: Set<string>;
// Contains: ['expo', 'expo-asset', 'expo-task-manager']

Available as named export from source or CommonJS module:

// ES module import
import { lazyImports } from 'babel-preset-expo/build/lazyImports';

// CommonJS require
const { lazyImports } = require('babel-preset-expo/lazy-imports-blacklist.js');

Types

Core Option Types

Main configuration interfaces for TypeScript users.

import type { ConfigAPI, TransformOptions } from '@babel/core';

export type BabelPresetExpoOptions = BabelPresetExpoPlatformOptions & {
  /** Web-specific settings that override global options */
  web?: BabelPresetExpoPlatformOptions;
  /** Native-specific settings that override global options */
  native?: BabelPresetExpoPlatformOptions;
};

export type BabelPresetExpoPlatformOptions = {
  /** Disable or configure the @babel/plugin-proposal-decorators plugin */
  decorators?: false | { legacy?: boolean; version?: number };
  /** Enable or disable adding the Reanimated plugin by default (default: true) */
  reanimated?: boolean;
  /** Enable or disable adding the Worklets plugin by default (default: true) */
  worklets?: boolean;
  /** Change the policy for handling JSX (default: 'automatic') */
  jsxRuntime?: 'classic' | 'automatic';
  /** JSX import source when using automatic runtime (default: 'react') */
  jsxImportSource?: string;
  /** Enable lazy imports for better startup performance */
  lazyImports?: boolean;
  /** Disable import/export transform for tree shaking */
  disableImportExportTransform?: boolean;
  /** Disable deep import warnings */
  disableDeepImportWarnings?: boolean;
  /** Disable Flow type stripping transform */
  disableFlowStripTypesTransform?: boolean;
  /** Enable or configure Babel runtime transform */
  enableBabelRuntime?: boolean | string;
  /** Transform profile for Hermes optimization */
  unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
  /** React Compiler configuration */
  'react-compiler'?: false | ReactCompilerOptions;
  /** Enable typeof window runtime checks optimization */
  minifyTypeofWindow?: boolean;
  /** Enable import.meta transform to globalThis registry */
  unstable_transformImportMeta?: boolean;
};