Блог

Я использую пользовательский крючок для установки, редактирования и удаления файлов cookie на моем сайте Gatsby:

use-cookie.ts

 import { useState } from 'react';

const getItem = (key: string) => {
  if (typeof document !== undefined) {
    document.cookie.split('; ').reduce((total, currentCookie) => {
      const item = currentCookie.split('=');
      const storedKey = item[0];
      const storedValue = item[1];

      return key === storedKey ? decodeURIComponent(storedValue) : total;
    }, '');
  }
};

const setItem = (key: string, value: string | boolean, numberOfDays: number) => {
  const now = new Date();

  now.setTime(now.getTime()   numberOfDays * 60 * 60 * 24 * 1000);

  if (typeof document !== undefined) {
    document.cookie = `${key}=${value}; expires=${now.toUTCString()}; path=/`;
  }
};

export const useCookie = (key: string, defaultValue: string | boolean | any) => {
  const getCookie = () => (getItem(key), defaultValue);
  const [cookie, setCookie] = useState(getCookie());

  const updateCookie = (value: string, numberOfDays: number) => {
    setCookie(value);
    setItem(key, value, numberOfDays);
  };

  return [cookie, updateCookie];
};
  

Я использую его в компоненте следующим образом:

 const [initialCookieValue, updateCookieValue] = useCookie('cookie', false);
  

Однако, несмотря на проверку всех ссылок на document with if (typeof document !== undefined) , мой сайт все еще ломается при сборке WebpackError: ReferenceError: document is not defined . Я понятия не имею, что я делаю не так, или как это исправить, но я знаю, что ошибка исчезнет, если я удалю хук.

Есть идеи?

Проверьте undefined как строку, 'undefined' .

   if (typeof document !== 'undefined')
  

Применяется к вашему коду:

 import { useState } from 'react';

const getItem = (key: string) => {
  if (typeof document !== 'undefined') {
    document.cookie.split('; ').reduce((total, currentCookie) => {
      const item = currentCookie.split('=');
      const storedKey = item[0];
      const storedValue = item[1];

      return key === storedKey ? decodeURIComponent(storedValue) : total;
    }, '');
  }
};

const setItem = (key: string, value: string | boolean, numberOfDays: number) => {
  const now = new Date();

  now.setTime(now.getTime()   numberOfDays * 60 * 60 * 24 * 1000);

  if (typeof document !== 'undefined') {
    document.cookie = `${key}=${value}; expires=${now.toUTCString()}; path=/`;
  }
};

export const useCookie = (key: string, defaultValue: string | boolean | any) => {
  const getCookie = () => (getItem(key), defaultValue);
  const [cookie, setCookie] = useState(getCookie());

  const updateCookie = (value: string, numberOfDays: number) => {
    setCookie(value);
    setItem(key, value, numberOfDays);
  };

  return [cookie, updateCookie];
};