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"

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.