Fix SSR for breadcrumbs and collapsible-nav

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `28.3.0`.
+**Bug fixes**
+
+- Fix server-side rendering of `EuiBreadcrumbs` ([#3970](https://github.com/elastic/eui/pull/3970))
 
 ## [`28.3.0`](https://github.com/elastic/eui/tree/v28.3.0)
 

src/components/breadcrumbs/breadcrumbs.tsx

@@ -186,12 +186,14 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
   max = 5,
   ...rest
 }) => {
+  const innerWidth =
+    typeof window === 'undefined' ? -Infinity : window.innerWidth;
   const [currentBreakpoint, setCurrentBreakpoint] = useState(
-    getBreakpoint(window.innerWidth)
+    getBreakpoint(innerWidth)
   );
 
   const functionToCallOnWindowResize = throttle(() => {
-    const newBreakpoint = getBreakpoint(window.innerWidth);
+    const newBreakpoint = getBreakpoint(innerWidth);
     if (newBreakpoint !== currentBreakpoint) {
       setCurrentBreakpoint(newBreakpoint);
     }
@@ -200,11 +202,15 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
 
   // Add window resize handlers
   useEffect(() => {
-    window.addEventListener('resize', functionToCallOnWindowResize);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', functionToCallOnWindowResize);
 
-    return () => {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
+      return () => {
+        window.removeEventListener('resize', functionToCallOnWindowResize);
+      };
+    } else {
+      return () => {};
+    }
   }, [responsive, functionToCallOnWindowResize]);
 
   const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => {

src/components/collapsible_nav/collapsible_nav.tsx

@@ -93,14 +93,17 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   maskProps,
   ...rest
 }) => {
+  const innerWidth =
+    typeof window === 'undefined' ? -Infinity : window.innerWidth;
+
   const [flyoutID] = useState(id || htmlIdGenerator()('euiCollapsibleNav'));
   const [windowIsLargeEnoughToDock, setWindowIsLargeEnoughToDock] = useState(
-    window.innerWidth >= dockedBreakpoint
+    innerWidth >= dockedBreakpoint
   );
   const navIsDocked = isDocked && windowIsLargeEnoughToDock;
 
   const functionToCallOnWindowResize = throttle(() => {
-    if (window.innerWidth < dockedBreakpoint) {
+    if (innerWidth < dockedBreakpoint) {
       setWindowIsLargeEnoughToDock(false);
     } else {
       setWindowIsLargeEnoughToDock(true);
@@ -110,19 +113,23 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
 
   // Watch for docked status and appropriately add/remove body classes and resize handlers
   useEffect(() => {
-    window.addEventListener('resize', functionToCallOnWindowResize);
+    if (typeof window === 'undefined') {
+      return () => {};
+    } else {
+      window.addEventListener('resize', functionToCallOnWindowResize);
 
-    if (navIsDocked) {
-      document.body.classList.add('euiBody--collapsibleNavIsDocked');
-    } else if (isOpen) {
-      document.body.classList.add('euiBody--collapsibleNavIsOpen');
-    }
+      if (navIsDocked) {
+        document.body.classList.add('euiBody--collapsibleNavIsDocked');
+      } else if (isOpen) {
+        document.body.classList.add('euiBody--collapsibleNavIsOpen');
+      }
 
-    return () => {
-      document.body.classList.remove('euiBody--collapsibleNavIsDocked');
-      document.body.classList.remove('euiBody--collapsibleNavIsOpen');
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
+      return () => {
+        document.body.classList.remove('euiBody--collapsibleNavIsDocked');
+        document.body.classList.remove('euiBody--collapsibleNavIsOpen');
+        window.removeEventListener('resize', functionToCallOnWindowResize);
+      };
+    }
   }, [navIsDocked, functionToCallOnWindowResize, isOpen]);
 
   const onKeyDown = (event: KeyboardEvent) => {

src/services/breakpoint.ts

@@ -44,7 +44,7 @@ export const BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
  * that is less than or equal to the width
  *
  * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimu width
+ * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
  * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
  */
 export function getBreakpoint(