babel-plugin-reflow

0.5.7 verified Sat Apr 25 auth: no javascript

Babel plugin to transpile Flow type annotations to TypeScript, with a CLI wrapper for batch conversion. Current stable version 0.5.7 (latest). Development appears slow but active with periodic releases. Key differentiators: focuses on pretty output via Prettier, handles comments well, proven on real projects (27k and 41k LOC). Compared to alternatives like flow-to-ts or babel-plugin-flow-to-typescript, Reflow offers a CLI and better output formatting. Supports base types, generics, utility types, nullable types, optional chaining, nullish coalescing, and class decorator replacement. Limitation: empty Flow object types become `object` not `{}` since v0.5.

Common errors

error Error: Could not find plugin 'babel-plugin-reflow' ↓

cause Package not installed or not in node_modules.

fix

Run npm install --save-dev babel-plugin-reflow or yarn add --dev babel-plugin-reflow.

error SyntaxError: Unexpected token (1:10) (While processing: ...) ↓

cause File contains Flow syntax but Babel is not configured to parse Flow first.

fix

Add @babel/preset-flow to your Babel presets before the Reflow plugin.

error TypeScript error: Type 'object' is not assignable to type '{}' ↓

cause Reflow v0.5+ converts empty object `{}` to `object` which is not compatible.

fix

Either adjust TypeScript config to allow object or manually replace object with {}.

error Error: Unknown option 'exclude-dirs' ↓

cause Using deprecated CLI option.

fix

Replace --exclude-dirs with --exclude-patterns and update the pattern syntax.

Warnings

breaking Empty Flow object types `{}` are transformed to `object` instead of `{}` since v0.5.0. ↓

fix Manually replace `object` with `{}` in generated code if `{}` semantics required.

deprecated The `--exclude-dirs` option is deprecated in favor of `--exclude-patterns`. ↓

fix Use `--exclude-patterns '**/node_modules/**'` instead.

gotcha Flow's `mixed` type is transformed to `unknown` in TypeScript; this may not be type-safe for codebases relying on dynamic access. ↓

fix Audit uses of `mixed` and add type guards or assertions as needed.

gotcha Function type inference may differ: Flow's exact object types may become less precise. ↓

fix Review generated types for exact object semantics and add `Readonly` or `as const` as needed.

warning Plugin does not handle `$ReadOnlyArray`, `$ReadOnly`, `$Exact` utilities; they may cause errors. ↓

fix Manually replace with TypeScript equivalents or suppress errors.

Install

npm install babel-plugin-reflow

yarn add babel-plugin-reflow

pnpm add babel-plugin-reflow

Imports

default
wrong
```
const reflow = require('babel-plugin-reflow')
```
correct
```
import reflow from 'babel-plugin-reflow'
```
Plugin is exported as default export. CommonJS require works but TypeScript users should use default import.

ReflowError

wrong

import ReflowError from 'babel-plugin-reflow'

correct

import { ReflowError } from 'babel-plugin-reflow'

ReflowError is a named export, not default.

plugin

wrong

{
  "plugins": ["reflow"]
}

correct

// .babelrc
{
  "plugins": ["babel-plugin-reflow"]
}

Plugin name in Babel config is the full package name.

Quickstart

Demonstrates CLI usage to transpile a directory and programmatic usage with Babel.

// Install: npm install --save-dev babel-plugin-reflow
// Run CLI on src directory, replace .js with .ts in-place:
// npx reflow --replace src/
// Or with dry run:
// npx reflow -d src/
// Programmatic usage:
const reflow = require('babel-plugin-reflow');
const babel = require('@babel/core');
const code = `
// @flow
function greet(name: string): string {
  return 'Hello, ' + name;
}
`;
const result = babel.transformSync(code, {
  plugins: [reflow],
  filename: 'input.js',
});
console.log(result.code);
// Output:
// function greet(name: string): string {
//   return 'Hello, ' + name;
// }