Vue3 defineAsyncComponent hide error message in console on fail

[nexorianus]

Hi,
is there a way to hide the Error when a component could not be loaded?
The reason I am asking is, I have a list of dynamically loaded components in one "theme" folder, and a fallbacks in another folder.
If the themed file is not in the theme folder, i wnat to use the fallback. And only if the fallback File is not there, an error should be issued to the console.

I was trying to solve it like follows:

const ForkedComponent = await defineAsyncComponent({
  loader: () => import(`@/components/${themeName}/${compName()}.vue`),
  // should not push errors to the browser console
  suspensible: true,
  errorComponent: defineAsyncComponent({
    loader: () => import(`@/components/generic/${compName()}.vue`),
    // may push errors to the browser console on fail
    suspensible: true,
    errorComponent: ComponentError,
    timeout: 1000,
  }),
  timeout: 1000,
});

Has anyone an idea on how to get rid of the error thrown by the outer defineAsyncComponent?

[Alfred-Skyblue]

Try using this method:

const ForkedComponent = await defineAsyncComponent({
  loader: () => {
    return import(`@/components/${themeName}/${compName()}.vue`).catch(
      () => import(`@/components/generic/${compName()}.vue`)
    )
  },
  suspensible: true,
  errorComponent: ErrorComponent,
  timeout: 1000
})

[nexorianus]

thank you!
I did not think about actually catching the error at that point.
Even tho it is not the prettiest code, it does exactly what I need it to.