From f0eda7e0aa0f1adde69e3d796deaff22839b523b Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 18 Dec 2020 14:21:40 +0100 Subject: [PATCH] core-api: ensure that routable extension components are discovered at boot Co-authored-by: blam --- .../core-api/src/extensions/extensions.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/core-api/src/extensions/extensions.tsx b/packages/core-api/src/extensions/extensions.tsx index adec690f20..e56b6901dd 100644 --- a/packages/core-api/src/extensions/extensions.tsx +++ b/packages/core-api/src/extensions/extensions.tsx @@ -15,7 +15,7 @@ */ import React, { lazy, Suspense } from 'react'; -import { RouteRef } from '../routing'; +import { RouteRef, useRouteRef } from '../routing'; import { attachComponentData } from './componentData'; import { Extension, BackstagePlugin } from '../plugin/types'; @@ -36,7 +36,23 @@ export function createRoutableExtension< const { component, mountPoint } = options; return createReactExtension({ component: { - lazy: component, + lazy: () => + component().then(InnerComponent => { + const RoutableExtensionWrapper = ((props: any) => { + // Validate that the routing is wired up correctly in the App.tsx + try { + useRouteRef(mountPoint); + } catch { + throw new Error( + 'Routable extension component was not discovered in the app element tree. ' + + 'Routable extension components may not be rendered by other components and must be ' + + 'directly available as an element within the App provider component.', + ); + } + return ; + }) as T; + return RoutableExtensionWrapper; + }), }, data: { 'core.mountPoint': mountPoint,