Handling failed dynamic imports

Feature request

Is your feature request related to a problem? Please describe.

Example: A website with lazy loading components. While scrolling down, your mobile internet might be cut off. Once you get to the bottom, parts of the website won’t be displayed because fetching the chunks failed. Those components will remain stuck in their loading state, even when internet connectivity is back.

Describe the solution you’d like

In our case we would like to catch the error and maybe display an error message and also a button that lets users try again on fetching the chunks.

const DynamicComponent = dynamic(
  () => import("../../components/DynamicComponent"),
  { 
    loading: () => <span>loading...</span>,
    errorMsg: () => <span>Network interruption detected</span>,
    retry: () => <button>Try again</button>,
  },
);

Additional context

[Janpot]

Wouldn’t this work?

const DynamicComponent = dynamic(() => {
  return import("../../components/DynamicComponent")
    .catch(() => <span>Network interruption detected</span>)
});

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.