Fix component type comparison in Sidebar

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -486,7 +486,13 @@ const SidebarItemWithSubmenu = ({
 export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   // Filter children for SidebarSubmenu components
   const [submenu] = useElementFilter(props.children, elements =>
-    elements.getElements().filter(child => child.type === SidebarSubmenu),
+    // Directly comparing child.type with SidebarSubmenu will not work with in
+    // combination with react-hot-loader
+    //
+    // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720
+    elements
+      .getElements()
+      .filter(child => child.type === React.createElement(SidebarSubmenu).type),
   );
 
   if (submenu) {

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -162,8 +162,15 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
   }, [location.pathname]);
 
   // Filter children for SidebarGroups
+  //
+  // Directly comparing child.type with SidebarSubmenu will not work with in
+  // combination with react-hot-loader
+  //
+  // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720
   let sidebarGroups = useElementFilter(children, elements =>
-    elements.getElements().filter(child => child.type === SidebarGroup),
+    elements
+      .getElements()
+      .filter(child => child.type === React.createElement(SidebarGroup).type),
   );
 
   if (!children) {