Flipper Babel Transformer

0.273.0 verified Sat Apr 25 auth: no javascript

A Babel transformer plugin used internally by Flipper (Facebook's mobile app debugging tool) to transpile Flipper plugin code. As part of the Flipper monorepo, it is tightly coupled with Flipper's build system and not intended for general use. Version 0.273.0 is current, with frequent releases alongside Flipper. No alternative exists since it is specific to Flipper's ecosystem. This package ships TypeScript types and is released under the MIT license.

Common errors

error Error: Cannot find module 'flipper-babel-transformer' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install flipper-babel-transformer or add to dependencies.

error Error: require() of ES Module not supported ↓

cause Trying to import a CJS module using ESM dynamic import.

fix

Use require('flipper-babel-transformer') instead of import() or ES import statement.

error TypeError: transformer.getBabelConfig is not a function ↓

cause The exported shape may differ between versions; getBabelConfig might not exist.

fix

Check the package's exported functions (e.g., console.log(transformer)) and use the correct method.

Warnings

deprecated Flipper is being deprecated in favor of React Native DevTools. This package may not receive further updates. ↓

fix Migrate to React Native DevTools when available.

gotcha CommonJS only: attempting ESM import will fail. ↓

fix Use require() instead of import.

gotcha Not intended for general use; only for Flipper plugin development. ↓

fix Do not use outside Flipper context.

breaking Breaking changes may occur without notice as part of Flipper monorepo updates. ↓

fix Pin to a specific version and test when upgrading Flipper.

Install

npm install flipper-babel-transformer

yarn add flipper-babel-transformer

pnpm add flipper-babel-transformer

Imports

default

wrong

import transformer from 'flipper-babel-transformer';

correct

const transformer = require('flipper-babel-transformer');

This package is CommonJS only; ESM import not supported.

require.resolve
```
const path = require.resolve('flipper-babel-transformer');
```
Typically used to pass transformer path to webpack or Flipper config.

MetroTransformer

wrong

const { MetroTransformer } = await import('flipper-babel-transformer');

correct

const { MetroTransformer } = require('flipper-babel-transformer');

Named export MetroTransformer for use with Metro bundler. Only available in CJS.

Quickstart

Shows how to use the transformer's Babel config in a webpack rule for Flipper plugins.

// Using flipper-babel-transformer in a Flipper plugin webpack config
const transformer = require('flipper-babel-transformer');
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            // This transformer is specific to Flipper plugin environment
            ...transformer.getBabelConfig(),
            sourceMaps: true
          }
        }
      }
    ]
  }
};