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

I have the following Dynamic Import with react lazy

const CaseStudyListing = lazy(() =>

I am using suspense

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

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


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 {
} 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}>

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

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

		sink.renderIntoElementById('app', html);


		const helmet = Helmet.renderStatic();
		// console.log(helmet);


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';

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
(function () {
	window.onpageshow = function (event) {
		if (event.persisted) {

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

	const App = () => (
			<Router history={history}>
	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.