CODEWITHSUNDEEP
typescript
Wondermarin
Wondermarin

Reputation: 211

Property 'RelativeTimeFormat' does not exist on type 'typeof Intl'

There are no errors while writing the code, but this occurs during compilation:

src/index.ts:2:24 - error TS2339: Property 'RelativeTimeFormat' does not exist on type 'typeof Intl'.

2   const rtf = new Intl.RelativeTimeFormat("en", { style: "long" });
                         ~~~~~~~~~~~~~~~~~~


Found 1 error.

Although this problem should have been solved after this PR.

My tsconfig:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "outDir": "lib",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "strict": true,
    "declaration": true,
    "removeComments": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "src"
  ]
}

TypeScript version: 4.0.3

Upvotes: 16

Views: 8236

Answers (2)

Shoaib Ahmad
Shoaib Ahmad

Reputation: 85

Try setting up Intl.RelativeTimeFormat polyfill provided by Format.JS

Usage

Via polyfill.io

You can use polyfill.io URL Builder to create a polyfill script tag for Intl.RelativeTimeFormat. By default the created URL does not come with any locale data. In order to add locale data, append Intl.RelativeTimeFormat.~locale. to your list of features. For example:

<!-- Polyfill Intl.RelativeTimeFormat, its dependencies & `en` locale data -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.RelativeTimeFormat,Intl.RelativeTimeFormat.~locale.en"></script>

Simple

import '@formatjs/intl-relativetimeformat/polyfill'
import '@formatjs/intl-relativetimeformat/locale-data/en' // locale-data for en

Dynamic import + capability detection

import {shouldPolyfill} from '@formatjs/intl-relativetimeformat/should-polyfill'
async function polyfill(locale: string) {
  const unsupportedLocale = shouldPolyfill(locale)
  // This locale is supported
  if (!unsupportedLocale) {
   return
  }
  // Load the polyfill 1st BEFORE loading data
  await import('@formatjs/intl-relativetimeformat/polyfill-force')
  await import(
  `@formatjs/intl-relativetimeformat/locale- 
  data/${unsupportedLocale}`
  )
}

Upvotes: 1

Hugodby
Hugodby

Reputation: 1183

According to the PR you linked, it was only published with TypeScript v4.1.2. Also, it is part of the es2020.intl TypeScript lib definition.

You first need to install a more up to date version of typescript: `npm install -D typescript@^4.1.2

Then you must update your tsconfig with something like:

"compilerOptions": {
  ...
  "lib": [
    "DOM",
    "ES2020",
    "ESNext"
    ],
  ...
}

Another solution would be to use a polyfill instead. This will ensure that your React application works in older browser not supporting the ES2020 standard. See here https://formatjs.io/docs/polyfills/intl-relativetimeformat/

Upvotes: 8

Related Questions