Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs.

[m-nathani]

🐛 Bug Report

To Reproduce

A minimal reproducible example.

We found a report on sentry about failing to read cookies cookies on specific env mentioned below.

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
...

export const initI18next = ({ languages, defaultLanguage }) => {
  const detectionOptions = {
    order: ['cookie', 'localStorage', 'navigator'],
    lookupCookie: 'i18next-widget',
    lookupLocalStorage: 'i18nextLng-widget',
    caches: ['localStorage', 'cookie'],
    excludeCacheFor: ['cimode'],
  };

  ...

  i18nInstance = i18n.use(HttpApi).use(LanguageDetector).use(initReactI18next);
  i18nInstance
    .init({
      load: 'currentOnly',
      supportedLngs,
      cleanCode: true,
      interpolation: {
        escapeValue: false,
      },
      detection: detectionOptions,
      ns: ['translation', 'common'],
      react: {
        useSuspense: true,
      },
      backend: {
        // locale files can be found in the `public` directory
        loadPath: `${getFilePath()}/locales/{{lng}}/{{ns}}.json`,
        // We don't want to cache the translation files
        requestOptions: {
          cache: 'no-store',
        },
        // Required when widget is embedded in partner website?
        crossDomain: true,
      },
    })
    .then(() => {
      // TODO: Lazy load moment locale?
      moment.locale(i18nInstance?.language);
    });

  return i18nInstance;
};

Expected behavior

Plugin for browser detection should have checks for reading cookies if they are enabled.

something similar to navigator.cookieEnabled : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/cookieEnabled

P.S: will add these check in my code too.. however would be great to handle in detector itself to handle fallback.

Your Environment

• runtime version: i.e. node v20
• i18next version:

  "i18next": "^23.6.0",
  "i18next-browser-languagedetector": "^7.1.0",
  "i18next-http-backend": "^2.3.1",
  "react-i18next": "^13.3.1",

• browser: Chrome 120.0.0
• browser.name: Chrome
• device: Mac
• device.family: Mac
• interface_type: exception
• level: error
• os: Mac OS X >=10.15.7 os.name: Mac OS X

[adrai]

You can do this yourself:

const detectionOptions = {
    order: navigator.cookieEnabled ? ['cookie', 'localStorage', 'navigator'] : ['localStorage', 'navigator'],
    lookupCookie: 'i18next-widget',
    lookupLocalStorage: 'i18nextLng-widget',
    caches: navigator.cookieEnabled ? ['localStorage', 'cookie'] : ['localStorage'],
    excludeCacheFor: ['cimode'],
  };

[adrai]

fyi: similar discussion: https://github.com/js-cookie/js-cookie/issues/823#issuecomment-1543972888

[m-nathani]

fyi: similar discussion: js-cookie/js-cookie#823 (comment)

Way to go, for creating a robust api ! 😆