Route-based code splitting chunks are not found after building the app only for deeper routes

Question

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

Answer 1

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.