babel-plugin-transform-import-sync

babel-plugin-transform-import-sync

A babel plugin to transform async import to sync.

Installation

NPM

$ npm install babel-plugin-transform-import-sync --save-dev

Usage

In .babelrc.

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "env": {
        "development": {
            "presets": [
                "react-hmre"
            ],
            "plugins": [
                "syntax-dynamic-import",
                "transform-import-sync"
            ]
        }
    },
    "plugins": [
        "transform-runtime",
        "transform-decorators-legacy"
    ]
}

Example

Async component import like this:

import asyncComponent from 'components/AsyncComponent';

export default [{
    path: '/',
    component: asyncComponent(() => import('containers/Root'))
}];

will be transformed to sync:

import asyncComponent from 'components/AsyncComponent';

export default [{
    path: '/',
    component: asyncComponent(() => (function() {
        const component = require('containers/Root');
        return component.default || component;
    })())
}];