Announcement

This plugin is now react-loadable/babel!

babel-plugin-transform-react-loadable

Experimental Babel plugin to make advanced usage of react-loadable easier.

Examples

Please see the main react-loadable example as a reference.

Example 1 - server side rendering

In

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
});

Out

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
  serverSideRequirePath: path.join(__dirname, './MyComponent'),
});

Example 2 - Webpack synchronous loading support

To enable this transformation, pass the webpack: true option to the plugin (see below).

In

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
});

Out

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
  serverSideRequirePath: path.join(__dirname, './MyComponent'),
  webpackRequireWeakId: () => require.resolveWeak('./MyComponent'),
});

Installation

$ npm install --save-dev babel-plugin-transform-react-loadable

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["transform-react-loadable"]
}

// with options
{
  "plugins": [
    ["transform-react-loadable", {
      "server": true, // default
      "webpack": true
    }]
  ]
}

Via CLI

$ babel --plugins transform-react-loadable script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-loadable"]
});