fix: Fix compatibility with moduleResolution: 'Bundler' (#694)

Fixes #690

examples/example-app-router/tsconfig.json

@@ -13,7 +13,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

packages/next-intl/src/server/react-client/index.tsx

@@ -3,7 +3,6 @@ import type {
   getFormatter as getFormatter_type,
   getNow as getNow_type,
   getTimeZone as getTimeZone_type,
-  getTranslations as getTranslations_type,
   getMessages as getMessages_type,
   getLocale as getLocale_type,
   unstable_setRequestLocale as unstable_setRequestLocale_type
@@ -36,14 +35,16 @@ export const getNow = notSupported('getNow') as typeof getNow_type;
 export const getTimeZone = notSupported(
   'getTimeZone'
 ) as typeof getTimeZone_type;
-export const getTranslations = notSupported(
-  'getTranslations'
-) as typeof getTranslations_type;
 export const getMessages = notSupported(
   'getMessages'
 ) as typeof getMessages_type;
 export const getLocale = notSupported('getLocale') as typeof getLocale_type;
 
+// The type of `getTranslations` is not assigned here because it
+// causes a type error. The types use the `react-server` entry
+// anyway, therefore this is irrelevant.
+export const getTranslations = notSupported('getTranslations');
+
 export const unstable_setRequestLocale = notSupported(
   'unstable_setRequestLocale'
 ) as typeof unstable_setRequestLocale_type;

packages/next-intl/src/server/react-server/createRequestConfig.tsx

@@ -1,9 +1,8 @@
-// @ts-expect-error
 // eslint-disable-next-line import/no-extraneous-dependencies
 import getRuntimeConfig from 'next-intl/config';
 import type {IntlConfig} from 'use-intl/core';
 import type {GetRequestConfigParams} from './getRequestConfig';
 
-export default getRuntimeConfig as (
+export default getRuntimeConfig as unknown as (
   params: GetRequestConfigParams
 ) => IntlConfig | Promise<IntlConfig>;

packages/next-intl/src/server/react-server/getConfig.tsx

@@ -1,5 +1,5 @@
 import {cache} from 'react';
-import {initializeConfig} from 'use-intl/core';
+import {initializeConfig, IntlConfig} from 'use-intl/core';
 import createRequestConfig from './createRequestConfig';
 
 // Make sure `now` is consistent across the request in case none was configured
@@ -25,10 +25,24 @@ const receiveRuntimeConfig = cache(
   }
 );
 
-const getConfig = cache(async (locale: string) => {
-  const runtimeConfig = await receiveRuntimeConfig(locale, createRequestConfig);
-  const opts = {...runtimeConfig, locale};
-  return initializeConfig(opts);
-});
+const getConfig = cache(
+  async (
+    locale: string
+  ): Promise<
+    IntlConfig & {
+      getMessageFallback: NonNullable<IntlConfig['getMessageFallback']>;
+      now: NonNullable<IntlConfig['now']>;
+      onError: NonNullable<IntlConfig['onError']>;
+      timeZone: NonNullable<IntlConfig['timeZone']>;
+    }
+  > => {
+    const runtimeConfig = await receiveRuntimeConfig(
+      locale,
+      createRequestConfig
+    );
+    const opts = {...runtimeConfig, locale};
+    return initializeConfig(opts);
+  }
+);
 
 export default getConfig;

packages/next-intl/src/server/react-server/getFormatter.tsx

@@ -14,7 +14,9 @@ const getFormatterImpl = cache(async (locale: string) => {
  * The formatter automatically receives the request config, but
  * you can override it by passing in additional options.
  */
-export default async function getFormatter(opts?: {locale?: string}) {
+export default async function getFormatter(opts?: {
+  locale?: string;
+}): Promise<ReturnType<typeof createFormatter>> {
   const locale = await resolveLocaleArg(opts);
   return getFormatterImpl(locale);
 }

packages/next-intl/src/server/react-server/getMessages.tsx

@@ -1,4 +1,5 @@
 import {cache} from 'react';
+import type {AbstractIntlMessages} from 'use-intl';
 import getConfig from './getConfig';
 import resolveLocaleArg from './resolveLocaleArg';
 
@@ -14,7 +15,9 @@ const getMessagesImpl = cache(async (locale: string) => {
   return config.messages;
 });
 
-export default async function getMessages(opts?: {locale?: string}) {
+export default async function getMessages(opts?: {
+  locale?: string;
+}): Promise<AbstractIntlMessages> {
   const locale = await resolveLocaleArg(opts);
   return getMessagesImpl(locale);
 }

packages/next-intl/src/server/react-server/getNow.tsx

@@ -7,7 +7,7 @@ const getNowImpl = cache(async (locale: string) => {
   return config.now;
 });
 
-export default async function getNow(opts?: {locale?: string}) {
+export default async function getNow(opts?: {locale?: string}): Promise<Date> {
   const locale = await resolveLocaleArg(opts);
   return getNowImpl(locale);
 }

packages/next-intl/src/server/react-server/getTimeZone.tsx

@@ -7,7 +7,9 @@ const getTimeZoneImpl = cache(async (locale: string) => {
   return config.timeZone;
 });
 
-export default async function getTimeZone(opts?: {locale?: string}) {
+export default async function getTimeZone(opts?: {
+  locale?: string;
+}): Promise<string> {
   const locale = await resolveLocaleArg(opts);
   return getTimeZoneImpl(locale);
 }

packages/next-intl/src/server/react-server/getTranslations.tsx

@@ -17,6 +17,7 @@ import getLocale from './getLocale';
 // We need to define these with function overloads, otherwise TypeScript
 // messes up the return type.
 
+// CALL SIGNATURE 1: `getTranslations(namespace)`
 function getTranslations<
   NestedKey extends NamespaceKeys<
     IntlMessages,
@@ -104,6 +105,7 @@ Promise<{
     key: [TargetKey] extends [never] ? string : TargetKey
   ): any;
 }>;
+// CALL SIGNATURE 2: `getTranslations({locale, namespace})`
 function getTranslations<
   NestedKey extends NamespaceKeys<
     IntlMessages,
@@ -192,6 +194,7 @@ Promise<{
     key: TargetKey
   ): any;
 }>;
+// IMPLEMENTATION
 async function getTranslations<
   NestedKey extends NamespaceKeys<
     IntlMessages,

packages/next-intl/test/server/react-server/index.test.tsx

@@ -80,6 +80,17 @@ describe('getTranslations', () => {
     const t = await getTranslations({locale: 'en', namespace: 'About'});
     expect(t.raw('rich')).toBe('<link>{name}</link>');
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function TypeTests() {
+    const t = await getTranslations();
+
+    // Valid
+    t('About.basic');
+
+    // @ts-expect-error Invalid argument
+    t(2);
+  }
 });
 
 describe('getFormatter', () => {
@@ -96,6 +107,18 @@ describe('getFormatter', () => {
       '1/1/2020'
     );
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function TypeTests() {
+    const format = await getFormatter();
+    const date = new Date('2020-01-01T00:00:00.000Z');
+
+    // Valid
+    format.dateTime(date, {dateStyle: 'full'});
+
+    // @ts-expect-error Invalid argument
+    format.dateTime(date, {dateStyle: 'unknown'});
+  }
 });
 
 describe('getNow', () => {
@@ -108,6 +131,17 @@ describe('getNow', () => {
       '2020-01-01T00:00:00.000Z'
     );
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function TypeTests() {
+    const now = await getNow();
+
+    // Valid
+    now.toISOString();
+
+    // @ts-expect-error Invalid argument
+    now.unknown();
+  }
 });
 
 describe('getMessages', () => {
@@ -118,6 +152,17 @@ describe('getMessages', () => {
   it('returns the messages', async () => {
     expect(await getMessages({locale: 'en'})).toHaveProperty('About');
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function TypeTests() {
+    const messages = await getMessages();
+
+    // @ts-expect-error
+    messages.about();
+
+    // Valid
+    return messages.about;
+  }
 });
 
 describe('getTimeZone', () => {
@@ -128,4 +173,15 @@ describe('getTimeZone', () => {
   it('returns the time zone', async () => {
     expect(await getTimeZone({locale: 'en'})).toBe('Europe/London');
   });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function TypeTests() {
+    const timeZone = await getTimeZone();
+
+    // Valid
+    timeZone.toUpperCase();
+
+    // @ts-expect-error Invalid argument
+    timeZone.unknown();
+  }
 });

packages/next-intl/tsconfig.json

@@ -2,14 +2,16 @@
   "extends": "eslint-config-molindo/tsconfig.json",
   "include": ["src", "test", "types", "next-env.d.ts"],
   "compilerOptions": {
+    "moduleDetection": "force",
+    "isolatedModules": true,
     "module": "esnext",
     "lib": ["dom", "esnext"],
     "target": "ES2020",
     "importHelpers": false,
     "declaration": true,
     "sourceMap": true,
     "rootDir": ".",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "jsx": "react",
     "esModuleInterop": true,
     "skipLibCheck": true,

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

@@ -8,7 +8,7 @@ import validateMessages from './validateMessages';
 export default function initializeConfig<
   // This is a generic to allow for stricter typing. E.g.
   // the RSC integration always provides a `now` value.
-  Props extends Omit<IntlConfig, 'children'>
+  Props extends IntlConfig
 >({getMessageFallback, messages, onError, ...rest}: Props) {
   const finalOnError = onError || defaultOnError;
   const finalGetMessageFallback =