FORMAT_ERROR when using the Intl.RelativeTimeFormat polyfill with v6.0.0 of ember-intl

[Pjaerr]

• I am on the latest ember-intl version
• I have searched the issues of this repo and believe that this is not a duplicate

The Intl.RelativeTimeFormat polyfill is blowing up on the latest 6.0.0-beta.X builds, showing the following in the console on Safari 13:

Unhandled Promise Rejection: Error: [@formatjs/intl Error FORMAT_ERROR] Error formatting relative time.
Locale: en-gb


undefined is not an object (evaluating 'RelativeTimeFormat.bind')

This does not happen on 5.7.2.

We're loading the polyfill in the application route like:

  async beforeModel() {
    if (shouldPolyfillIntlLocale()) {
      await import('@formatjs/intl-locale/polyfill');
    }

    if (shouldPolyfillRelativeTimeFormat()) {
      await import('@formatjs/intl-relativetimeformat/polyfill');

      await import(`@formatjs/intl-relativetimeformat/locale-data/en`);
    }
  }

Environment

• Ember Version: 4.12.0
• Ember CLI Version: 5.2.0
• Ember Intl Version: 6.0.0-beta.7 (but the issue happens on all beta versions)
• Browser(s): iOS Safari 13 (works fine on modern browsers when not requiring a polyfill)
• Node Version: v18.16.0

Steps to Reproduce

1. Install version 6.0.0-beta.1 or above of ember-intl
2. Install @formatjs/intl-relativetimeformat
3. Load polyfills and locale-data before application boots:

    await import('@formatjs/intl-relativetimeformat/polyfill');
    await import(`@formatjs/intl-relativetimeformat/locale-data/en`);

4. Use this.intl.formatRelative on a browser that isn't supported (such as Safari 13 on an iPad Simulator running iOS 13.7)

[ijlee2]

Hi, @Pjaerr. Thanks for reporting the bug and providing code.

As I'm still new to the project, I'm not familiar with installing polyfills for ember-intl. The documentation showed adding the import statements in app/app.js. (It is possible that the particular documentation is outdated.)

// app.js (Ember app entry point)
import '@formatjs/intl-relativetimeformat/polyfill';
import '@formatjs/intl-relativetimeformat/locale-data/en'; // Add English data
import '@formatjs/intl-relativetimeformat/locale-data/fr'; // Add French data
import '@formatjs/intl-relativetimeformat/locale-data/es'; // Add Spanish data
// etc.

Have you tried conditionally importing the polyfills in app/app.js? (I'm guessing, the beforeModel() hooks you showed may be from app/routes/application.js.)

Also, do you have ideas about which code could be causing the error to be thrown?

[Pjaerr]

👋 @ijlee2

Yeah that's right, the beforeModel() is part of the application route and they are being conditionally imported.

I will try and dig into it a bit more once I have some time to see if I can see where things are blowing up.

[ijlee2]

Sounds good, thanks!

[ijlee2]

Will close the issue as there's little information to go on.