diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
index 92052d9f6a..4817774182 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
@@ -19,7 +19,14 @@ import '@asyncapi/react-component/styles/default.css';
 import { makeStyles, alpha, darken } from '@material-ui/core/styles';
 import React from 'react';
 import { useTheme } from '@material-ui/core/styles';
-import { AsyncApiResolver } from './AsyncApiDefinitionWidget';
+
+/** @public */
+export type AsyncApiResolver = {
+  schema: string;
+  order: number;
+  canRead: boolean;
+  read(uri: any): Promise<string>;
+};
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -164,16 +171,6 @@ const httpFetchResolver: AsyncApiResolver = {
   },
 };
 
-const config = {
-  parserOptions: {
-    __unstable: {
-      resolver: {
-        resolvers: [httpsFetchResolver, httpFetchResolver],
-      },
-    },
-  },
-};
-
 type Props = {
   definition: string;
   resolvers?: AsyncApiResolver[];
@@ -189,6 +186,16 @@ export const AsyncApiDefinition = ({
     theme.palette.type === 'dark' ? classes.dark : ''
   }`;
 
+  const config = {
+    parserOptions: {
+      __unstable: {
+        resolver: {
+          resolvers: [httpsFetchResolver, httpFetchResolver],
+        },
+      },
+    },
+  };
+
   // Overwrite default resolvers if custom ones are set
   if (resolvers) {
     config.parserOptions.__unstable.resolver.resolvers = resolvers;
diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
index 7089143610..104a55e576 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx
@@ -16,6 +16,7 @@
 
 import { Progress } from '@backstage/core-components';
 import React, { Suspense } from 'react';
+import { AsyncApiResolver } from './AsyncApiDefinition';
 
 // The asyncapi component and related CSS has a significant size, only load it
 // if the element is actually used.
@@ -25,14 +26,6 @@ const LazyAsyncApiDefinition = React.lazy(() =>
   })),
 );
 
-/** @public */
-export type AsyncApiResolver = {
-  schema: string;
-  order: number;
-  canRead: boolean;
-  read(uri: any): Promise<string>;
-};
-
 /** @public */
 export type AsyncApiDefinitionWidgetProps = {
   definition: string;
diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/index.ts b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/index.ts
index 116eb81295..3b07c32cfe 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/index.ts
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/index.ts
@@ -15,7 +15,5 @@
  */
 
 export { AsyncApiDefinitionWidget } from './AsyncApiDefinitionWidget';
-export type {
-  AsyncApiDefinitionWidgetProps,
-  AsyncApiResolver,
-} from './AsyncApiDefinitionWidget';
+export type { AsyncApiDefinitionWidgetProps } from './AsyncApiDefinitionWidget';
+export type { AsyncApiResolver } from './AsyncApiDefinition';