Intl.Numberformat, currencyDisplay: "narrowSymbol" not supported on Next.Js 9.4.4

Question

I'm using Next.JS 9.4.4

When trying to use:

new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency, useGrouping: true, currencyDisplay: 'narrowSymbol'});

I receive the error:

RangeError: Value narrowSymbol out of range for Intl.NumberFormat options property currencyDisplay
    at new NumberFormat

narrowSymbol is a supported property as you can see here and I have used it successfully on another project that wasn't using Next.

Am I missing something, or is there perhaps a workaround?

Answer 1

The problem might be that the browser you're using doesn't support the narrowSymbol currency display. You can check with Can I Use here:

https://caniuse.com/?search=currencyDisplay

You'll see how a few browsers like Safari have a note:

Doesn't support currencyDisplay: 'narrowSymbol'.

For these browsers that don't support it, you may need to polyfill Intl.NumberFormat so that you have access to narrowSymbol.

There are lots of polyfill options out there. I've used formatjs.io for this exact issue. You can find out more here:

https://formatjs.io/docs/polyfills/intl-numberformat

Answer 2

I had the same problem on iOS14 with React Native. narrowSymbol was simply not supported.