0

After reading this post, I tried to use react-code-splitting to splite my JavaScript bundle.

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 Dev Server Error

It seems like just a syntax problem?

export default class PageRouter extends React.Component {
    render() {
             ^
        return (...);
    }
}
webpack: Failed to compile.
Casper
  • 4,435
  • 10
  • 41
  • 72
  • 1
    Here is a tutorial video I found on using react-loadable library for splitting code in create react app which worked for me - https://youtu.be/AR5GSZuox1k – Prem Jan 06 '18 at 09:17
  • Here is a blog on medium regarding code splitting - https://medium.com/prod-io/code-splitting-in-react-using-webpack-1aa1014da216 – mindaJalaj Apr 23 '18 at 15:30
  • 1
    Modern React JS applications use React.lazy() and Suspense for lazy loading and code splitting. This video shows how to do that in great detail: https://youtu.be/j8NJc60H294 – Grgur Dec 20 '19 at 17:07

1 Answers1

1

I can't really tell what the root issue is but, I suspect that perhaps you are missing some babel plugins. Check out Paragons. It uses React Loadable. You can cross check the webpack config and examine the usage:

Start from:

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

in routes.js.

Dan
  • 267
  • 2
  • 6