fix: Apply global timeZone when using date skeletons in messages (e…

….g. `Ordered on {orderDate, date, ::yyyyMd}`) (#695)

Fixes #693

packages/use-intl/src/core/createBaseTranslator.tsx

@@ -259,13 +259,33 @@ function createBaseTranslatorImpl<
           convertFormatsToIntlMessageFormat(
             {...globalFormats, ...formats},
             timeZone
-          )
+          ),
+          {
+            formatters: {
+              getNumberFormat(locales, options) {
+                return new Intl.NumberFormat(locales, options);
+              },
+              getDateTimeFormat(locales, options) {
+                // Workaround for https://github.com/formatjs/formatjs/issues/4279
+                return new Intl.DateTimeFormat(locales, {timeZone, ...options});
+              },
+              getPluralRules(locales, options) {
+                return new Intl.PluralRules(locales, options);
+              }
+            }
+          }
         );
       } catch (error) {
+        const thrownError = error as Error;
         return getFallbackFromErrorAndNotify(
           key,
           IntlErrorCode.INVALID_MESSAGE,
-          (error as Error).message
+          process.env.NODE_ENV !== 'production'
+            ? thrownError.message +
+                ('originalMessage' in thrownError
+                  ? ` (${thrownError.originalMessage})`
+                  : '')
+            : thrownError.message
         );
       }
 

packages/use-intl/test/react/useTranslations.test.tsx

@@ -2,7 +2,7 @@ import {render, screen} from '@testing-library/react';
 import {parseISO} from 'date-fns';
 // eslint-disable-next-line import/no-named-as-default -- False positive
 import IntlMessageFormat from 'intl-messageformat';
-import React, {ReactNode} from 'react';
+import React, {ComponentProps, ReactNode} from 'react';
 import {it, expect, vi, describe, beforeEach} from 'vitest';
 import {
   Formats,
@@ -44,7 +44,8 @@ vi.mock('intl-messageformat', async (importOriginal) => {
 function renderMessage(
   message: string,
   values?: TranslationValues,
-  formats?: Partial<Formats>
+  formats?: Partial<Formats>,
+  providerProps?: Partial<ComponentProps<typeof IntlProvider>>
 ) {
   function Component() {
     const t = useTranslations();
@@ -57,6 +58,7 @@ function renderMessage(
       locale="en"
       messages={{message}}
       timeZone="Etc/UTC"
+      {...providerProps}
     >
       <Component />
     </IntlProvider>
@@ -147,6 +149,14 @@ it('applies a time zone when using a built-in format', () => {
   expectFormatted('date', 'short', '5/8/23');
 });
 
+it('applies a time zone when using a skeleton', () => {
+  const now = new Date('2024-01-01T00:00:00.000+0530');
+  renderMessage(`{now, date, ::yyyyMdHm}`, {now}, undefined, {
+    timeZone: 'Asia/Kolkata'
+  });
+  screen.getByText('1/1/2024, 00:00');
+});
+
 it('handles pluralisation', () => {
   renderMessage(
     'You have {numMessages, plural, =0 {no messages} =1 {one message} other {# messages}}.',