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(