How to handle Error with lazy Route: Failed to fetch dynamically imported module

[lasseklovstad]

Hi!

I have started using the lazy Route functionality and reduced my build index file by 50% 😄 and thats nice. But I have started seeing some errors that lazy loaded chunk files are not found. This often happens when the app is redeployed as described here.

I would love it if anyone have any recomandations of how to handle this correctly.

I have tried this, but this creates a typeerror, but i guess would potentially work?:

const router = createBrowserRouter([
  {
    path: "/",
    lazy: () => import("./routes/Demo/Demo").catch(() => window.location.reload()),
  },
]);

[brophdawg11]

Errors from lazy should bubble to route error boundaries, so you can either force a hard refresh like you're doing above or you could provide a UI to the user with a button to reload:

const router = createBrowserRouter([
  {
    path: "/",
    ErrorBoundary() {
      return (
        <>
          <h1>Uh oh!</h1>
          <p>Something went wrong!<p>
          <button onClick={() => window.location.reload()}>Click here to reload the page</button>
        </>
      );
    },   
    lazy: () => import("./routes/Demo/Demo").catch(() => window.location.reload()),
  },
]);

The type error is likely just that lazy expects to resolve with a route module, so this might fix it:

lazy: () => import("./routes/Demo/Demo").catch(() => {
  window.location.reload();
  return {};
}),

[User6531]

I found this

if (error.message.includes('Failed to fetch dynamically imported module')) {
    window.location.reload();
}

but I don`t like it 🙂

[lasseklovstad]

I found out that chrome/Firefox/Safari throws different messages. So I ended up doing this, but yeh it feals hacky:

  if (error.message.includes("dynamically imported module")) {
    // TypeError
    // Error message is different in some browsers:
    // Chrome: Failed to fetch dynamically imported module
    // Firefox/Safari: error loading dynamically imported module

[brophdawg11]

Just use a utility function:

async function importOrReload(dynamicImportFn) {
  try {
    return dynamicImportFn();
  } catch (e) {
    window.location.reload();
  }
}

const router = createBrowserRouter([
  {
    path: "/",
    lazy: importOrReload(() => import("./layout")),
    children: [{
      index:true,
      lazy: importOrReload(() => import("./home")),
    }]
  },
]);

[User6531]

Thanks a lot for your response.
I think it might work better if we only refresh the page when we encounter an error specifically related to the Failed to fetch dynamically imported module instead of refreshing for every error.
This way, we can let the error boundary catch and display other types of errors to the user.
Your understanding on this would be really appreciated.

[brophdawg11]

This was just an example - you can alter the logic in the utility function however you wish - such as conditionally reloading based on the error. But the idea here is that the catch is scoped to the dynamic import so it should only be catching those specific errors and does not rely on error-prone string matching across browsers.