Trying to get Dynamic Imports to work with React Lazy and Suspense

I have the following Dynamic Import with react lazy

const CaseStudyListing = lazy(() =>
	import(
		'../../ui/containers/CaseStudies/CaseStudies.listing.container'
	),
);

I am using suspense

<Suspense fallback={<FullPageLoader />}>
     <Route path="/case-studies/:slug" component={CaseStudySingle} />
</Suspense>

I visit the home page and the bundle size doesn’t change at all, I expected that all the code associated with this route would be removed from the bundle

There is never a second fetch request to dynamically import this component. it is default exported.

There is stuff going on in the server startup and client startup that could be interefering but I don’t know how. I will include that code below

server/index.js

import React from 'react';
import { renderToString, renderToNodeStream } from 'react-dom/server';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router';
import { Helmet } from 'react-helmet';
import Loadable from 'react-loadable';
import { ServerStyleSheet } from 'styled-components';
import {
	LoadableCaptureProvider,
	preloadAllLoadables,
} from 'meteor/npdev:react-loadable';
preloadAllLoadables().then(() => {
	onPageLoad(async (sink) => {
		const context = {};
		const sheet = new ServerStyleSheet();
		const loadableHandle = {};
		const routes = (await import('../both/routes.js')).default;

		const App = (props) => (
			<StaticRouter location={props.location} context={context}>
				{routes}
			</StaticRouter>
		);

		const modules = [];
		// const html = renderToNodeStream((
		const html = renderToString(
			<LoadableCaptureProvider handle={loadableHandle}>
				<App location={sink.request.url} />
			</LoadableCaptureProvider>,
		);

		// we have a list of modules here, hopefully Meteor will allow to add them to bundle
		// console.log(modules);

		sink.renderIntoElementById('app', html);

		sink.appendToBody(loadableHandle.toScriptTag());

		const helmet = Helmet.renderStatic();
		// console.log(helmet);
		sink.appendToHead(helmet.meta.toString());
		sink.appendToHead(helmet.title.toString());
		sink.appendToHead(helmet.link.toString());
		sink.appendToHead(sheet.getStyleTags());
	});
});

client/index.js

import { Meteor } from 'meteor/meteor';

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, withRouter } from 'react-router-dom';
import { onPageLoad } from 'meteor/server-render';
import { createBrowserHistory } from 'history';
import { preloadLoadables } from 'meteor/npdev:react-loadable';

console.log('hi');
const history = createBrowserHistory();

/**
 * If browser back button was used, flush cache
 * This ensures that user will always see an accurate, up-to-date view based on their state
 * https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
 */
(function () {
	window.onpageshow = function (event) {
		if (event.persisted) {
			window.location.reload();
		}
	};
})();

onPageLoad(async () => {
	const routes = (await import('../both/routes.js')).default;

	const App = () => (
		<>
			<Router history={history}>
				<div>{routes}</div>
			</Router>
		</>
	);
	preloadLoadables().then(() => {
		ReactDOM.hydrate(<App />, document.getElementById('app'));
	});
});

Could it be I am using dynamic imports to import the whole routes component and then trying to do react lazy and dynamic imports in that component, that I am not sure.

Beyond the fact that I am dynamically loading the routes file and dynamically loading components in the routes file. I have also tried to dynamically load one component on the home page but I never see a separate fetch request for it. Example here

const HomePageBlog = React.lazy(() => import('./HomePageBlog'));

Any help would be greatly appreciated

I have not tested this yet with Lazy and Suspense. But to check, do you have the dynamic-import package added to the project?

Yes I do. I was able to get it to work, by not dynamically importing all the routes in one and changing that to a regular import and then going in and individually dynamically importing the routes. Seems to be working have increased my lighthouse score a bit so far.