Реакт-код-расщепление не работает

Question

После прочтения этого поста я попытался использовать ответное разбиение кода, чтобы разделить свой пакет JavaScript.

Webpack Version: 3.10.10

PageRouter.js

import Async from "react-code-splitting";
import React from "react";
// import Home from "pages/home/Home";
// ...

const Home = () => <Async load={import("pages/home/Home")} />

export default class PageRouter extends React.Component {
    render() {
        return(
            <Router history={browserHistory}>
                <Route exact path="/" component={Home} />
            </Router>
        );
    }
}

Ошибка сервера разработки Webpack

Кажется, просто проблема с синтаксисом?

export default class PageRouter extends React.Component {
    render() {
             ^
        return (...);
    }
}
webpack: Failed to compile.

Answer 1

Я не могу точно сказать, в чем заключается основная проблема, но я подозреваю, что, возможно, вам не хватает некоторых плагинов Babel. Проверьте Paragons. Он использует React Loadable. Вы можете перепроверить конфигурацию webpack и проверить использование:

Начать с:

export const CodeSplitPageLoadable = createLoadable('./demo/components/CodeSplitPage')

в маршрутах.