core-compact-api: convertLegacyApp throws in case of invalid elements are found

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

packages/core-compat-api/src/collectLegacyRoutes.test.tsx

@@ -279,4 +279,58 @@ describe('collectLegacyRoutes', () => {
       screen.findByText('plugins: test'),
     ).resolves.toBeInTheDocument();
   });
+
+  it('should throw if invalid Route has been detected', async () => {
+    const plugin = createPlugin({
+      id: 'test',
+    });
+    const routeRef = createRouteRef({ id: 'test' });
+    const Page = plugin.provide(
+      createRoutableExtension({
+        name: 'Test',
+        mountPoint: routeRef,
+        component: () =>
+          Promise.resolve(() => {
+            const app = useApp();
+            return <div>plugins: {app.getPlugins().map(p => p.getId())}</div>;
+          }),
+      }),
+    );
+
+    expect(() =>
+      collectLegacyRoutes(
+        <FlatRoutes>
+          <Route path="/" element={<Page />} />
+          <Route path="/" element={<Page />} />
+          <div />
+        </FlatRoutes>,
+      ),
+    ).toThrow(/Invalid <Route/);
+  });
+
+  it('should throw if <Route /> has no path', async () => {
+    const plugin = createPlugin({
+      id: 'test',
+    });
+    const routeRef = createRouteRef({ id: 'test' });
+    const Page = plugin.provide(
+      createRoutableExtension({
+        name: 'Test',
+        mountPoint: routeRef,
+        component: () =>
+          Promise.resolve(() => {
+            const app = useApp();
+            return <div>plugins: {app.getPlugins().map(p => p.getId())}</div>;
+          }),
+      }),
+    );
+
+    expect(() =>
+      collectLegacyRoutes(
+        <FlatRoutes>
+          <Route element={<Page />} />
+        </FlatRoutes>,
+      ),
+    ).toThrow(/<Route \/> element with invalid path/);
+  });
 });

packages/core-compat-api/src/collectLegacyRoutes.tsx

@@ -173,9 +173,8 @@ export function collectLegacyRoutes(
     (route: ReactNode) => {
       // TODO(freben): Handle feature flag and permissions framework wrapper elements
       if (!React.isValidElement(route) || route.type !== Route) {
-        return;
+        throw new Error('Invalid <Route /> element has been detected.');
       }
-
       const routeElement = route.props.element;
       const path: string | undefined = route.props.path;
       const plugin = getComponentData<LegacyBackstagePlugin>(
@@ -186,7 +185,12 @@ export function collectLegacyRoutes(
         routeElement,
         'core.mountPoint',
       );
-      if (!plugin || !path) {
+      if (path === undefined) {
+        throw new Error(
+          `<Route /> element with invalid path has been detected. Please make sure to pass the path's props`,
+        );
+      }
+      if (!plugin) {
         return;
       }