fix: Enable React Compiler ESLint plugin and fix relevant case (#1281)

Note that not the React Compiler, but merely the ESLint plugin has been
enabled.

Two very minor changes have been made that will not practically affect
apps:

1.
https://github.com/amannn/next-intl/pull/1281/files#diff-cc1535638f476a3c6bc0963bee2d96d868d36b3bfe54532f883bd68c8b6c7032
2.
https://github.com/amannn/next-intl/pull/1281/files#diff-77b8d7665f71fbfd5b235e11a40577295255c916dc2fa688c1538d3fa7aa85ce

packages/next-intl/.eslintrc.js

@@ -5,9 +5,10 @@ module.exports = {
     'molindo/jest',
     'molindo/cypress'
   ],
-  plugins: ['deprecation'],
+  plugins: ['deprecation', 'eslint-plugin-react-compiler'],
   rules: {
-    'import/no-useless-path-segments': 'error'
+    'import/no-useless-path-segments': 'error',
+    'react-compiler/react-compiler': 'error'
   },
   overrides: [
     {

packages/next-intl/.size-limit.ts

@@ -3,7 +3,7 @@ import type {SizeLimitConfig} from 'size-limit';
 const config: SizeLimitConfig = [
   {
     path: 'dist/production/index.react-client.js',
-    limit: '14.084 KB'
+    limit: '14.095 KB'
   },
   {
     path: 'dist/production/index.react-server.js',

packages/next-intl/package.json

@@ -105,6 +105,7 @@
     "eslint": "^8.56.0",
     "eslint-config-molindo": "^7.0.0",
     "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240822",
     "next": "^14.2.4",
     "path-to-regexp": "^6.2.2",
     "publint": "^0.2.8",

packages/next-intl/src/navigation/react-client/createLocalizedPathnamesNavigation.test.tsx

@@ -158,6 +158,7 @@ describe("localePrefix: 'as-needed'", () => {
       });
 
       function Component() {
+        // eslint-disable-next-line react-compiler/react-compiler
         const pathname = createLocalizedPathnamesNavigation({
           locales,
           pathnames: {
@@ -233,6 +234,7 @@ describe("localePrefix: 'as-needed'", () => {
       function Component() {
         const router = useRouter();
         const initialRouter = useRef(router);
+        // eslint-disable-next-line react-compiler/react-compiler
         return String(router === initialRouter.current);
       }
       const {rerender} = render(<Component />);

packages/next-intl/src/react-client/useLocale.tsx

@@ -11,7 +11,8 @@ export default function useLocale(): string {
   let locale;
 
   try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- False positive
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks, react-compiler/react-compiler -- False positive
     locale = useBaseLocale();
   } catch (error) {
     if (typeof params?.[LOCALE_SEGMENT_NAME] === 'string') {

packages/use-intl/.eslintrc.js

@@ -1,7 +1,9 @@
 module.exports = {
   extends: ['molindo/typescript', 'molindo/react'],
+  plugins: ['eslint-plugin-react-compiler'],
   rules: {
-    'import/no-useless-path-segments': 'error'
+    'import/no-useless-path-segments': 'error',
+    'react-compiler/react-compiler': 'error'
   },
   overrides: [
     {

packages/use-intl/.size-limit.ts

@@ -5,7 +5,7 @@ const config: SizeLimitConfig = [
     name: './ (ESM)',
     import: '*',
     path: 'dist/esm/index.js',
-    limit: '14.065 kB'
+    limit: '14.085 kB'
   },
   {
     name: './ (no useTranslations, ESM)',

packages/use-intl/package.json

@@ -79,6 +79,7 @@
     "date-fns": "^3.6.0",
     "eslint": "^8.56.0",
     "eslint-config-molindo": "^7.0.0",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240822",
     "publint": "^0.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/use-intl/src/react/IntlProvider.tsx

@@ -26,8 +26,11 @@ export default function IntlProvider({
   // The formatter cache is released when the locale changes. For
   // long-running apps with a persistent `IntlProvider` at the root,
   // this can reduce the memory footprint (e.g. in React Native).
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const cache = useMemo(() => createCache(), [locale]);
+  const cache = useMemo(() => {
+    // eslint-disable-next-line no-unused-expressions
+    locale;
+    return createCache();
+  }, [locale]);
   const formatters: Formatters = useMemo(
     () => createIntlFormatters(cache),
     [cache]

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

@@ -294,6 +294,7 @@ it('has a stable reference', () => {
     if (existingT) {
       expect(t).toBe(existingT);
     } else {
+      // eslint-disable-next-line react-compiler/react-compiler
       existingT = t;
     }
 
@@ -467,6 +468,7 @@ describe('t.markup', () => {
 
     function Component() {
       const t = useTranslations();
+      // eslint-disable-next-line react-compiler/react-compiler
       result = t.markup('message', {
         important: (children) => `<b>${children}</b>`
       });

packages/use-intl/src/react/useTranslationsImpl.tsx

@@ -12,7 +12,11 @@ const isServer = typeof window === 'undefined';
 export default function useTranslationsImpl<
   Messages extends AbstractIntlMessages,
   NestedKey extends NestedKeyOf<Messages>
->(allMessages: Messages, namespace: NestedKey, namespacePrefix: string) {
+>(
+  allMessagesPrefixed: Messages,
+  namespacePrefixed: NestedKey,
+  namespacePrefix: string
+) {
   const {
     cache,
     defaultTranslationValues,
@@ -26,10 +30,14 @@ export default function useTranslationsImpl<
 
   // The `namespacePrefix` is part of the type system.
   // See the comment in the hook invocation.
-  allMessages = allMessages[namespacePrefix] as Messages;
-  namespace = resolveNamespace(namespace, namespacePrefix) as NestedKey;
+  const allMessages = allMessagesPrefixed[namespacePrefix] as Messages;
+  const namespace = resolveNamespace(
+    namespacePrefixed,
+    namespacePrefix
+  ) as NestedKey;
 
   if (!timeZone && !hasWarnedForMissingTimezone && isServer) {
+    // eslint-disable-next-line react-compiler/react-compiler
     hasWarnedForMissingTimezone = true;
     onError(
       new IntlError(