1

I'm building a React App using create-react-app, and now I'm struggling with code splitting in it. I'm using react-loadable. Everything was fine in the development environment, but when it's built some chunks on some deeper routes (e.g. /test/2 or /test-a/42) were not loaded because the chunks were not found (404).

This is how I loaded my component using react-loadable

.....

const test = Loadable({
  loader: () => import("../test/test"),
  loading: Loading
});
const testdetail = Loadable({
  loader: () => import("../test/testdetail"),
  loading: Loading
});
const testa = Loadable({
  loader: () => import("../test/testa"),
  loading: Loading
});
const testadetail = Loadable({
  loader: () => import("../test/testadetail"),
  loading: Loading
});

.....

Here's how I used those components in my routes

<Switch>
  <Route
    exact
    path="/test"
    component={test}
    />
   <Route
    path="/test/:id"
    component={testdetail}
    />
  <Route
    exact
    path="/test-a"
    component={testa}
    />
  <Route
    path="/test-a/:id"
    component={testadetail}
    />
</Switch>

As I said everything seemed okay in development mode, however the routes /test/:id & /test-a/:id chunks were not found in production mode after I built the app. Any answer would really save my life, thanks

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Alfian Dhimas Nur Marita
  • 13
  • 2

1 Answers1

0

The code seems okay. Have you tried other libraries like "loadable-component"

. You can also upgrade to CRA-2.0 with new

React.lazy

and

Suspense which are also used for code splitting and many other stuffs. Check the docs. . If you are not using SSR then you can try these.

Trilochan Satapathy
  • 60
  • 5
  • Yes, I've tried the new lazy function from React, it still didn't work, but I've figured it out that the issue was with the react router https://github.com/ReactTraining/react-router/blob/master/FAQ.md#why-doesnt-my-application-work-when-loading-nested-routes , but thanks for the answer. – Alfian Dhimas Nur Marita Nov 07 '18 at 06:14