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

user_11848391 0
Viewed 3058

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?

typescript next.js reactjs javascript
4 Answers

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

user_11302600

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

user_10452990

It sounds like the server side code is causing the problem, there shouldn't be a problem with client side code.

A possible solution is is to install node with full Internationalisation support (ICU).

Here is the link to the node doc

user_72268630

This does not work for you?

function formatMoney(amount) {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    useGrouping: true,
    currencyDisplay: 'narrowSymbol',
  }).format(amount)
}

console.log(formatMoney(1000.00))

user_47504010
Related