diff --git a/CHANGELOG.md b/CHANGELOG.md index 142de03417..441889b8d6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/react/src/components/cookieConsent/cookieController.ts b/packages/react/src/components/cookieConsent/cookieController.ts index a869e9156d..96264f860f 100644 --- a/packages/react/src/components/cookieConsent/cookieController.ts +++ b/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: () => '', diff --git a/packages/react/src/components/cookieConsent/cookieStorageProxy.ts b/packages/react/src/components/cookieConsent/cookieStorageProxy.ts index 0a73a3c7fb..fc9b8205ec 100644 --- a/packages/react/src/components/cookieConsent/cookieStorageProxy.ts +++ b/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 []; diff --git a/packages/react/src/hooks/useTheme.tsx b/packages/react/src/hooks/useTheme.tsx index 1e691c2984..a35cd34211 100644 --- a/packages/react/src/hooks/useTheme.tsx +++ b/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 = (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}`); diff --git a/packages/react/src/utils/isSsrEnvironment.ts b/packages/react/src/utils/isSsrEnvironment.ts new file mode 100644 index 0000000000..ab02b93c29 --- /dev/null +++ b/packages/react/src/utils/isSsrEnvironment.ts @@ -0,0 +1,3 @@ +export const isSsrEnvironment = () => { + return typeof window === 'undefined' || typeof document === 'undefined'; +};