babel-plugin-transform-react-router-optimize

1.0.2 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that automatically rewrites ES2015 imports from 'react-router' (v2/v3) to direct file imports under '/lib', enabling bundle size optimization by cherry-picking only the used components. Stable at v1.0.2, released September 2017. Requires react-router >=2.0.0. Designed for Babel 6, not compatible with Babel 5. Key differentiator: eliminates manual import rewriting for React Router bundle optimization.

Common errors

error Error: Couldn't find preset "es2015" relative to directory ... ↓

cause Babel 6 requires explicit presets; missing es2015 preset for transpilation.

fix

Add "presets": ["es2015"] to .babelrc or install babel-preset-es2015.

error Module not found: Error: Can't resolve 'react-router/lib/Route' ↓

cause Plugin tries to resolve to a specific file, but that file doesn't exist (e.g., in react-router v4).

fix

Use react-router v2 or v3, or switch to a different optimization approach.

error SyntaxError: ... unexpected token import ↓

cause Babel is not configured to transpile ES6 modules; the plugin runs before transpilation.

fix

Ensure your build pipeline uses Babel with appropriate presets (es2015 or env).

Warnings

gotcha This plugin is for Babel 6 only. It will not work with Babel 5 or Babel 7+. ↓

fix Upgrade to Babel 6 or use a different plugin for Babel 7 (e.g., transform-imports).

gotcha Only supports ES2015 import statements. Requires and other module systems are not transformed. ↓

fix Use ES2016 import syntax for react-router imports.

gotcha Plugin only transforms imports from 'react-router'. Imports from subpaths like 'react-router/lib' are left unchanged. ↓

fix Ensure you import from 'react-router' top-level, not subpaths.

deprecated React Router v4+ does not support direct file imports under /lib. This plugin is only useful for react-router v2/v3. ↓

fix For react-router v4+, use tree-shaking with webpack or babel-plugin-transform-imports.

Install

npm install babel-plugin-transform-react-router-optimize

yarn add babel-plugin-transform-react-router-optimize

pnpm add babel-plugin-transform-react-router-optimize

Imports

Plugin (default)
wrong
```
const plugin = require('babel-plugin-transform-react-router-optimize');
```
correct
```
import plugin from 'babel-plugin-transform-react-router-optimize';
```
Default export is the Babel plugin function. CommonJS require works too, but default import is typical for Babel plugins.
Plugin in .babelrc (String)
```
{
  "plugins": ["transform-react-router-optimize"]
}
```
In .babelrc, use the plugin name string. No need to import.

Plugin usage via Node API

const babel = require('babel-core');
babel.transform(code, { plugins: ['transform-react-router-optimize'] });

For programmatic use, pass plugin name as string in plugins array.

Quickstart

Shows .babelrc config and transformation from top-level import to per-file imports for smaller bundles.

// .babelrc example
{
  "plugins": ["transform-react-router-optimize"]
}

// Input: 
import { Route, IndexRoute } from 'react-router';

// Output (transformed by plugin):
import Route from 'react-router/lib/Route';
import IndexRoute from 'react-router/lib/IndexRoute';