"Error: Missing locale data for" since upgrading to datetimeformat@3 #2489

adrienharnay · 2021-01-07T13:18:19Z

adrienharnay
Jan 7, 2021

Hey,

Sincre upgrading, and following this schema: https://formatjs.io/docs/polyfills, I have a new error:

Error: Missing locale data for 
    at Object.invariant (/fakepath/node_modules/@formatjs/ecma402-abstract/utils.js:87:15)
    at Object.ResolveLocale (/fakepath/node_modules/@formatjs/ecma402-abstract/ResolveLocale.js:25:17)
    at Object.InitializeDateTimeFormat (/fakepath/node_modules/@formatjs/ecma402-abstract/DateTimeFormat/InitializeDateTimeFormat.js:83:29)
    at new exports.DateTimeFormat (/fakepath/node_modules/@formatjs/intl-datetimeformat/src/core.js:95:24)
    at hasChromeLt71Bug (/fakepath/node_modules/@formatjs/intl-datetimeformat/should-polyfill.js:13:13)
    at shouldPolyfill (/fakepath/node_modules/@formatjs/intl-datetimeformat/should-polyfill.js:38:9)
    at eval (webpack:///../shared/polyfills/syncIntlPolyfills.ts?:112:7)
    at Object.../shared/polyfills/syncIntlPolyfills.ts (/fakepath/packages/app/public/dist/server/main.js:13260:1)
    at __webpack_require__ (/fakepath/packages/app/public/dist/server/main.js:27:30)
    at eval (webpack:///multi_../shared/polyfills/syncEntryPolyfills_../shared/polyfills/syncIntlPolyfills_./src/entry/js/server?:2:1)

My webpack entrypoint that handles intl polyfills:

const {
  shouldPolyfill: shouldPolyfillDateTimeFormat
} = require("@formatjs/intl-datetimeformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillDisplayNames
} = require("@formatjs/intl-displaynames/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillGetCanonicalLocales
} = require("@formatjs/intl-getcanonicallocales/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillListFormat
} = require("@formatjs/intl-listformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillLocale
} = require("@formatjs/intl-locale/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillNumberFormat
} = require("@formatjs/intl-numberformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillPluralRules
} = require("@formatjs/intl-pluralrules/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillRelativeTimeFormat
} = require("@formatjs/intl-relativetimeformat/should-polyfill");

const globalObject = typeof window !== "undefined" ? window : global;

// https://formatjs.io/docs/polyfills
if (!globalObject.Intl) {
  /* no intl: base */
  const IntlPolyfill = require("intl");
  globalObject.Intl = IntlPolyfill;
  globalObject.Intl.polyfilled = true;

  Intl.__disableRegExpRestore();
  /* !no intl: base */

  /* no intl: plural rules */
  if (shouldPolyfillPluralRules()) {
    require("@formatjs/intl-pluralrules/polyfill");
  }
  /* !no intl: plural rules */
} else {
  console.log("1");
  /* intl: get canonical locales */
  if (shouldPolyfillGetCanonicalLocales()) {
    require("@formatjs/intl-getcanonicallocales/polyfill");
  }
  /* !intl: get canonical locales */

  /* intl: locale */
  if (shouldPolyfillLocale()) {
    require("@formatjs/intl-locale/polyfill");
  }
  /* !intl: locale */

  /* intl: plural rules */
  if (shouldPolyfillPluralRules()) {
    require("@formatjs/intl-pluralrules/polyfill");
  }
  /* !intl: plural rules */

  /* intl: number format */
  if (shouldPolyfillNumberFormat()) {
    require("@formatjs/intl-numberformat/polyfill");
  }
  /* !intl: number format */

  /* intl: relative time format */
  if (shouldPolyfillRelativeTimeFormat()) {
    require("@formatjs/intl-relativetimeformat/polyfill");
  }
  /* !intl: relative time format */

  /* intl: date time format */
  if (shouldPolyfillDateTimeFormat()) {
    require("@formatjs/intl-datetimeformat/polyfill");
  }
  /* !intl: date time format */

  /* intl: display names */
  if (shouldPolyfillDisplayNames()) {
    require("@formatjs/intl-displaynames/polyfill");
  }
  /* !intl: display names */

  /* intl: list format */
  if (shouldPolyfillListFormat()) {
    require("@formatjs/intl-listformat/polyfill");
  }
  /* !intl: list format */
}

// In real app, these polyfills are called dynamically based on the locale / stored in other files
const locale = "en-GB";

if (locale === "en-GB") {
  if (Intl.polyfilled) {
    require("intl/locale-data/jsonp/en-GB");
  }

  if (Intl.PluralRules && Intl.PluralRules.polyfilled) {
    require("@formatjs/intl-pluralrules/locale-data/en");
  }

  if (Intl.NumberFormat && Intl.NumberFormat.polyfilled) {
    require("@formatjs/intl-numberformat/locale-data/en-GB");
  }

  if (Intl.RelativeTimeFormat && Intl.RelativeTimeFormat.polyfilled) {
    require("@formatjs/intl-relativetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/add-golden-tz");
  }

  if (Intl.DisplayNames && Intl.DisplayNames.polyfilled) {
    require("@formatjs/intl-displaynames/locale-data/en-GB");
  }

  if (Intl.ListFormat && Intl.ListFormat.polyfilled) {
    require("@formatjs/intl-listformat/locale-data/en-GB");
  }
} else if (locale === "fr-FR") {
  if (Intl.polyfilled) {
    require("intl/locale-data/jsonp/fr-FR");
  }

  // etc
}

One weird thing is when I execute this file using node I have no error, but when I use it as a webpack entry point I have the mentioned error.

Would anyone have any idea why the error would throw? Before 3.0.0, I had the exact same thing except the intl-locale was after the intl-datetimeformat branch.

Thanks in advance for any guidance you may have!

Answered by longlho

Jan 8, 2021

Ok can you give latest version a try?

View full answer

longlho · 2021-01-07T13:23:20Z

longlho
Jan 7, 2021
Maintainer

We no longer rely on intl package since it’s unmaintained. You should polyfill using @formatjs/intl-datetimeformat separately

0 replies

adrienharnay · 2021-01-07T13:55:18Z

adrienharnay
Jan 7, 2021
Author

Sorry, the path with intl is not executed on my environment. Here is the code that is relevant (all libraries from @formatjs):

const {
  shouldPolyfill: shouldPolyfillDateTimeFormat
} = require("@formatjs/intl-datetimeformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillDisplayNames
} = require("@formatjs/intl-displaynames/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillGetCanonicalLocales
} = require("@formatjs/intl-getcanonicallocales/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillListFormat
} = require("@formatjs/intl-listformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillLocale
} = require("@formatjs/intl-locale/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillNumberFormat
} = require("@formatjs/intl-numberformat/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillPluralRules
} = require("@formatjs/intl-pluralrules/should-polyfill");
const {
  shouldPolyfill: shouldPolyfillRelativeTimeFormat
} = require("@formatjs/intl-relativetimeformat/should-polyfill");

const globalObject = typeof window !== "undefined" ? window : global;

// https://formatjs.io/docs/polyfills
  /* intl: get canonical locales */
  if (shouldPolyfillGetCanonicalLocales()) {
    require("@formatjs/intl-getcanonicallocales/polyfill");
  }
  /* !intl: get canonical locales */

  /* intl: locale */
  if (shouldPolyfillLocale()) {
    require("@formatjs/intl-locale/polyfill");
  }
  /* !intl: locale */

  /* intl: plural rules */
  if (shouldPolyfillPluralRules()) {
    require("@formatjs/intl-pluralrules/polyfill");
  }
  /* !intl: plural rules */

  /* intl: number format */
  if (shouldPolyfillNumberFormat()) {
    require("@formatjs/intl-numberformat/polyfill");
  }
  /* !intl: number format */

  /* intl: relative time format */
  if (shouldPolyfillRelativeTimeFormat()) {
    require("@formatjs/intl-relativetimeformat/polyfill");
  }
  /* !intl: relative time format */

  /* intl: date time format */
  if (shouldPolyfillDateTimeFormat()) {
    require("@formatjs/intl-datetimeformat/polyfill");
  }
  /* !intl: date time format */

  /* intl: display names */
  if (shouldPolyfillDisplayNames()) {
    require("@formatjs/intl-displaynames/polyfill");
  }
  /* !intl: display names */

  /* intl: list format */
  if (shouldPolyfillListFormat()) {
    require("@formatjs/intl-listformat/polyfill");
  }
  /* !intl: list format */

// In real app, these polyfills are called dynamically based on the locale / stored in other files
const locale = "en-GB";

if (locale === "en-GB") {
  if (Intl.polyfilled) {
    require("intl/locale-data/jsonp/en-GB");
  }

  if (Intl.PluralRules && Intl.PluralRules.polyfilled) {
    require("@formatjs/intl-pluralrules/locale-data/en");
  }

  if (Intl.NumberFormat && Intl.NumberFormat.polyfilled) {
    require("@formatjs/intl-numberformat/locale-data/en-GB");
  }

  if (Intl.RelativeTimeFormat && Intl.RelativeTimeFormat.polyfilled) {
    require("@formatjs/intl-relativetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/add-golden-tz");
  }

  if (Intl.DisplayNames && Intl.DisplayNames.polyfilled) {
    require("@formatjs/intl-displaynames/locale-data/en-GB");
  }

  if (Intl.ListFormat && Intl.ListFormat.polyfilled) {
    require("@formatjs/intl-listformat/locale-data/en-GB");
  }
} else if (locale === "fr-FR") {
  if (Intl.polyfilled) {
    require("intl/locale-data/jsonp/fr-FR");
  }

  // etc
}

2 replies

longlho Jan 7, 2021
Maintainer

yeah u'd have to remote intl package completely since it conflicts with our polyfills

adrienharnay Jan 7, 2021
Author

OK, thank you for your answer! I completely removed intl from my deps and code, so now I have this code:

first file:

const {
  shouldPolyfill: shouldPolyfillDateTimeFormat,
} = require('@formatjs/intl-datetimeformat/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillDisplayNames,
} = require('@formatjs/intl-displaynames/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillGetCanonicalLocales,
} = require('@formatjs/intl-getcanonicallocales/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillListFormat,
} = require('@formatjs/intl-listformat/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillLocale,
} = require('@formatjs/intl-locale/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillNumberFormat,
} = require('@formatjs/intl-numberformat/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillPluralRules,
} = require('@formatjs/intl-pluralrules/should-polyfill');
const {
  shouldPolyfill: shouldPolyfillRelativeTimeFormat,
} = require('@formatjs/intl-relativetimeformat/should-polyfill');

// https://formatjs.io/docs/polyfills

/* intl: get canonical locales */
if (shouldPolyfillGetCanonicalLocales()) {
  require('@formatjs/intl-getcanonicallocales/polyfill');
}
/* !intl: get canonical locales */

/* intl: locale */
if (shouldPolyfillLocale()) {
  require('@formatjs/intl-locale/polyfill');
}
/* !intl: locale */

/* intl: plural rules */
if (shouldPolyfillPluralRules()) {
  require('@formatjs/intl-pluralrules/polyfill');
}
/* !intl: plural rules */

/* intl: number format */
if (shouldPolyfillNumberFormat()) {
  require('@formatjs/intl-numberformat/polyfill');
}
/* !intl: number format */

/* intl: relative time format */
if (shouldPolyfillRelativeTimeFormat()) {
  require('@formatjs/intl-relativetimeformat/polyfill');
}
/* !intl: relative time format */

/* intl: date time format */
if (shouldPolyfillDateTimeFormat()) {
  require('@formatjs/intl-datetimeformat/polyfill');
}
/* !intl: date time format */

/* intl: display names */
if (shouldPolyfillDisplayNames()) {
  require('@formatjs/intl-displaynames/polyfill');
}
/* !intl: display names */

/* intl: list format */
if (shouldPolyfillListFormat()) {
  require('@formatjs/intl-listformat/polyfill');
}
/* !intl: list format */

second file, loaded based on the locale (here en-GB):

  if (Intl.PluralRules && Intl.PluralRules.polyfilled) {
    require("@formatjs/intl-pluralrules/locale-data/en");
  }

  if (Intl.NumberFormat && Intl.NumberFormat.polyfilled) {
    require("@formatjs/intl-numberformat/locale-data/en-GB");
  }

  if (Intl.RelativeTimeFormat && Intl.RelativeTimeFormat.polyfilled) {
    require("@formatjs/intl-relativetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/locale-data/en-GB");
  }

  if (Intl.DateTimeFormat && Intl.DateTimeFormat.polyfilled) {
    require("@formatjs/intl-datetimeformat/add-golden-tz");
  }

  if (Intl.DisplayNames && Intl.DisplayNames.polyfilled) {
    require("@formatjs/intl-displaynames/locale-data/en-GB");
  }

  if (Intl.ListFormat && Intl.ListFormat.polyfilled) {
    require("@formatjs/intl-listformat/locale-data/en-GB");
  }

But I still have the exact same error described above... Would you have any idea? I think I strictly followed the docs

longlho · 2021-01-07T19:04:33Z

longlho
Jan 7, 2021
Maintainer

What env r you using? Node or browser? What version of packages are you using?

1 reply

adrienharnay Jan 7, 2021
Author

I am using node 14.15.0, the bug is occuring during server-side rendering, and here are the versions (all latest as of now):

    "@formatjs/intl-datetimeformat": "3.2.3",
    "@formatjs/intl-displaynames": "4.0.4",
    "@formatjs/intl-getcanonicallocales": "1.5.3",
    "@formatjs/intl-listformat": "5.0.4",
    "@formatjs/intl-locale": "2.4.13",
    "@formatjs/intl-numberformat": "6.1.3",
    "@formatjs/intl-pluralrules": "4.0.5",
    "@formatjs/intl-relativetimeformat": "8.0.3",

longlho · 2021-01-08T02:14:02Z

longlho
Jan 8, 2021
Maintainer

Ok can you give latest version a try?

3 replies

adrienharnay Jan 8, 2021
Author

The bug is gone, thank you very much for your help!

ondrasak Mar 22, 2021

Hey @adrienharnay, can you share what was the problem / how did you fix it? 🙏
Thanks!

adrienharnay Mar 22, 2021
Author

Hey, the bug is as described in the original post, and the fix was to upgrade to the latest version at the time :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Error: Missing locale data for" since upgrading to datetimeformat@3 #2489

{{title}}

Replies: 4 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

"Error: Missing locale data for" since upgrading to datetimeformat@3 #2489

adrienharnay Jan 7, 2021

Replies: 4 comments · 6 replies

longlho Jan 7, 2021 Maintainer

adrienharnay Jan 7, 2021 Author

longlho Jan 7, 2021 Maintainer

adrienharnay Jan 7, 2021 Author

longlho Jan 7, 2021 Maintainer

adrienharnay Jan 7, 2021 Author

longlho Jan 8, 2021 Maintainer

adrienharnay Jan 8, 2021 Author

ondrasak Mar 22, 2021

adrienharnay Mar 22, 2021 Author

adrienharnay
Jan 7, 2021

Replies: 4 comments 6 replies

longlho
Jan 7, 2021
Maintainer

adrienharnay
Jan 7, 2021
Author

longlho Jan 7, 2021
Maintainer

adrienharnay Jan 7, 2021
Author

longlho
Jan 7, 2021
Maintainer

adrienharnay Jan 7, 2021
Author

longlho
Jan 8, 2021
Maintainer

adrienharnay Jan 8, 2021
Author

adrienharnay Mar 22, 2021
Author