Catching dynamic import errors

Feature request

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

It would be handy to be able to catch any errors that may arise for dynamic imports, like a component not found, so we could handle the error and show a custom message for example. I haven’t seen a documented way of doing such a thing so that’s why I’m requesting it.

Describe the solution you’d like

An additional option to which a function can be passed to handle errors. Maybe that you can also return a element that will be shown then?

An rough example of what I had in mind:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(
  () => import('../components/hello'),
  {
    loading     : () => <p>...</p>,
    errorHandler: (err) => {
      console.error('An issue has occured while loading a component', err)

      if (err.code === 'MODULE_NOT_FOUND') {
        return <p>Unknown item</p>
      }

      return <p>Unknown error..</p>
    }
  }
)

[ijjk]

Hi, one way you could currently handle this is adding a .catch on the import e.g.

import dynamic from 'next/dynamic'

const Hello = dynamic(
  () => import('../components/hello').catch(err => {
    return () => <p>oops... this failed to load</p>
  }
}

[malithmcr]

Yes, I’m having the same issue.