CODEWITHSUNDEEP
reactjsreact-routernrwl-nxcode-splittingreact-lazy-load
Danny
Danny

Reputation: 11

NX and react router lazy doesn't split bundle

I am trying to use react router with lazy loading. I still see the bundle being downloaded as one main.js. The router resides in an nx application and the routes that should be lazy loaded are in nx libraries.

The app has something like this:

const Settings = lazy(() => import('from lib').then(({ Settings }) => ({ default: Settings })));

 <Routes>
      <Route path="/users" element={<Users />} />
      <Route path="/settings" element={
        <Suspense fallback={<>...</>}>
          <Settings />
        </Suspense>
      } />     
    </Routes>

The lib is exported from an index:

export {default as Settings} from './lib/Settings';

When I go to the users route, I see one main.js file that also includes the settings code.

How do I split the routes so not all of them are loaded at once?

Upvotes: 1

Views: 901

Answers (1)

pikilon
pikilon

Reputation: 167

After digging around I updated the nx to version 1.6.2.0 and the code splitting started working. To update nx you just have to follow this https://nx.dev/core-features/automate-updating-dependencies.

My entry in package.json for automate this is:

"nx:update": "nx migrate latest && nx",

Upvotes: 1

Related Questions