HDS-2244: SSR error document not defined

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Component] What has been changed
 - [Notification] Change auto closing notification progressbar to decrease instead of increase.
+- [CookieConsent] Fixed SSR problem with "document not defined"
 
 #### Fixed
 

packages/react/src/components/cookieConsent/cookieController.ts

@@ -1,5 +1,7 @@
 import cookie, { CookieSerializeOptions } from 'cookie';
 
+import { isSsrEnvironment } from '../../utils/isSsrEnvironment';
+
 export type CookieSetOptions = CookieSerializeOptions;
 
 export const defaultCookieSetOptions: CookieSetOptions = {
@@ -10,6 +12,9 @@ export const defaultCookieSetOptions: CookieSetOptions = {
 };
 
 function getAll() {
+  if (isSsrEnvironment()) {
+    return {};
+  }
   return cookie.parse(document.cookie);
 }
 
@@ -19,7 +24,9 @@ function getNamedCookie(name: string): string | undefined {
 }
 
 function setNamedCookie(name: string, value: string, options?: CookieSerializeOptions) {
-  document.cookie = cookie.serialize(name, value, options);
+  if (!isSsrEnvironment()) {
+    document.cookie = cookie.serialize(name, value, options);
+  }
 }
 
 function createCookieController(
@@ -34,7 +41,7 @@ function createCookieController(
     ...options,
   };
 
-  if (typeof window === 'undefined') {
+  if (isSsrEnvironment()) {
     return {
       get: () => '',
       set: () => '',

packages/react/src/components/cookieConsent/cookieStorageProxy.ts

@@ -1,5 +1,6 @@
 import { CookieSerializeOptions, parse } from 'cookie';
 
+import { isSsrEnvironment } from '../../utils/isSsrEnvironment';
 import { createCookieController, setNamedCookie, defaultCookieSetOptions, getAll } from './cookieController';
 
 export type CookieSetOptions = CookieSerializeOptions;
@@ -10,7 +11,7 @@ export const VERSION_COOKIE_NAME = 'city-of-helsinki-consent-version';
 
 // the old version how default cookie domain was picked
 function getCookieDomainForMultiDomainAccess(): string {
-  if (typeof window === 'undefined') {
+  if (isSsrEnvironment()) {
     return '';
   }
 
@@ -19,7 +20,7 @@ function getCookieDomainForMultiDomainAccess(): string {
 
 // the new version how to pick default cookie domain
 export function getCookieDomainForSubDomainAccess(): string {
-  if (typeof window === 'undefined') {
+  if (isSsrEnvironment()) {
     return '';
   }
 
@@ -53,6 +54,9 @@ export function createCookieStorageProxy(
   };
 
   const getConsentCookies = (): string[] => {
+    if (isSsrEnvironment()) {
+      return [];
+    }
     const cookies = document.cookie || '';
     if (!cookies || cookies.indexOf('=') < 0) {
       return [];

packages/react/src/hooks/useTheme.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { uniqueId } from 'lodash';
 
 import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import { isSsrEnvironment } from '../utils/isSsrEnvironment';
 
 /**
  * Sets the given custom theme for the component
@@ -11,7 +12,7 @@ import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
  * @return The custom class name that should be applied to the component
  */
 const setComponentTheme = <T,>(selector: string, theme: T, customClass: string): void => {
-  if (typeof window === 'undefined') return;
+  if (isSsrEnvironment()) return;
 
   // checks if the given css rule contains the custom class selector
   const hasCustomRule = (rule: CSSStyleRule): boolean => rule.selectorText?.includes(`${selector}.${customClass}`);

packages/react/src/utils/isSsrEnvironment.ts

@@ -0,0 +1,3 @@
+export const isSsrEnvironment = () => {
+  return typeof window === 'undefined' || typeof document === 'undefined';
+};