currencyDisplay must be either "code", "symbol", or "name" - Safari issue

Question

I am trying to use global Intl constructor for formatting values with currencies. But it appears to be currencyDisplay:'narrowSymbol' doesn't supported and work in Safari but works fine in Chrome.

The following error is returned in the console:
RangeError: currencyDisplay must be either "code", "symbol", or "name"

Philae

Answer 1

It appears this incompatibility is not listed on caniuse or MDN. Just looked at it today. I did see narrowSymbol is supported in the ECMAScript 2020 Internationalization API (https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-402.pdf), but I am not sure which browsers have implemented that.

Our tester mentioned issues in Safari desktop and mobile as well as Chrome on iOS. I updated my currencyDisplay option to symbol and it looked almost identical to the way it did before. I would suggest going with that option for now to get it to run in more browsers.

It would also be nice to get this incompatibility added to caniuse as well as MDN so individuals like myself do not opt for the more desirable narrow symbol style to save space only to find it does not work in a large portion of browsers.

Nitrite

If you spot an incompatibility not listed on MDN, you can always scroll down the page and click on "Report a problem with this content on GitHub" near the footer. That's what I just did: github.com/mdn/content/issues/2042 – Recalescence

@Recalescence Great! Thanks for doing that. I will definitely do that next time. – Nitrite