diff --git a/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts b/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts index c90a6b8270..e2479341c8 100644 --- a/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts +++ b/plugins/catalog-unprocessed-entities/src/alpha/devToolsRoute.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { createElement } from 'react'; import { DevToolsRouteBlueprint } from '@backstage/plugin-devtools/alpha'; /** @@ -25,8 +26,9 @@ export const unprocessedEntitiesDevToolsRoute = DevToolsRouteBlueprint.make({ path: 'unprocessed-entities', title: 'Unprocessed Entities', loader: () => - import('../components/UnprocessedEntities').then(m => ({ - default: m.UnprocessedEntitiesContent, - })), + import('../components/UnprocessedEntities').then( + ({ UnprocessedEntitiesContent }) => + createElement(UnprocessedEntitiesContent), + ), }, }); diff --git a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx index 21f25a013a..150ce43fb3 100644 --- a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx +++ b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx @@ -14,9 +14,12 @@ * limitations under the License. */ -import { createExtensionBlueprint } from '@backstage/frontend-plugin-api'; +import { + createExtensionBlueprint, + ExtensionBoundary, +} from '@backstage/frontend-plugin-api'; import { devToolsRouteDataRef } from './devToolsRouteDataRef'; -import { lazy, Suspense, JSX } from 'react'; +import { JSX } from 'react'; /** * Parameters for creating a DevTools route extension @@ -25,7 +28,7 @@ import { lazy, Suspense, JSX } from 'react'; export interface DevToolsRouteBlueprintParams { path: string; title: string; - loader: () => Promise<{ default: () => JSX.Element }>; + loader: () => Promise; } /** @@ -48,15 +51,8 @@ export const DevToolsRouteBlueprint = createExtensionBlueprint({ kind: 'devtools-route', attachTo: { id: 'page:devtools', input: 'routes' }, output: [devToolsRouteDataRef], - factory(params: DevToolsRouteBlueprintParams) { - // Create a lazy component for async loading - const LazyComponent = lazy(params.loader); - - const children = ( - Loading...}> - - - ); + factory(params: DevToolsRouteBlueprintParams, { node }) { + const children = ExtensionBoundary.lazy(node, params.loader); return [ devToolsRouteDataRef({