javascript - Intl.Numberformat, currencyDisplay: "narrowSymbol" not supported on Next.Js 9.4.4 - Stack Overflo

admin管理员组

文章数量:1410682

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?

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?

• javascript
• reactjs
• typescript
• next.js

Share Improve this question Follow edited Aug 23, 2020 at 17:33 Damian Jacobs asked Aug 23, 2020 at 17:28 Damian JacobsDamian Jacobs 53888 silver badges2929 bronze badges 4

• As you are using Nextjs, is Your Javascript running on the client or server. – k123 Commented Aug 23, 2020 at 17:45
• In this case, both – Damian Jacobs Commented Aug 23, 2020 at 17:52
• Same issue here, it only seems to happen on Firefox – Mario Alberto Contreras Commented Sep 25, 2020 at 22:07
• Safari iOS only added support for narrowSymbol in 14.5 and Safari Mac OS in 14.1. Your options are to polyfill or use symbol instead – ksav Commented Feb 23, 2022 at 22:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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./?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

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

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

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))

本文标签：