How to handle `cannot find module`

I am using string literals to dynamically import components based off text entered into my CMS. In the case that the user enters text for a component that does not exist, id love to be able to fallback.

In the below code i have tried using an ErrorBoundary, fallback of null, and a try/catch block, but i still get the ‘Error: Cannot find module’ error.

const ActualIcon = ({ icon }) => {
	try {
		const Icon = loadable(() => import(`../Icons/elements/${icon}`), {
			fallback: null,
		});
		return <Icon />;
	} catch (e) {
		return null;
	}
};

const FeatureIcon = ({ icon }) => (
	<ErrorBoundary>
		<ActualIcon icon={icon} />
	</ErrorBoundary>
);

Is there some other way i can prevent this error when trying to use loadable on a component that doesnt exist?

[haxxxton]

@foglerek thanks for your help. The solution appears to be:

import(`../${dynamicValue}`)
  .catch(() => import('../fallbackComponent'));

otherwise the fallbackComponent is always rendered even if there is a successful import 😃

[iamdcj]

Hey @haxxxton,

I’m having the same issue, did you manage to find a solid solution? If so, could you please share.

Thanks, David