fix: Improve error message when encountering a missing message in pro…

…duction (#706)

Fixes #704

packages/next-intl/package.json

@@ -110,11 +110,11 @@
   "size-limit": [
     {
       "path": "dist/production/index.react-client.js",
-      "limit": "12.82 KB"
+      "limit": "12.841 KB"
     },
     {
       "path": "dist/production/index.react-server.js",
-      "limit": "13.58 KB"
+      "limit": "13.6 KB"
     },
     {
       "path": "dist/production/navigation.react-client.js",

packages/use-intl/package.json

@@ -86,7 +86,7 @@
   "size-limit": [
     {
       "path": "dist/production/index.js",
-      "limit": "12.355 kB"
+      "limit": "12.385 kB"
     }
   ]
 }

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

@@ -18,6 +18,7 @@ import TranslationValues, {
 } from './TranslationValues';
 import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
 import {defaultGetMessageFallback, defaultOnError} from './defaults';
+import joinPath from './joinPath';
 import MessageKeys from './utils/MessageKeys';
 import NestedKeyOf from './utils/NestedKeyOf';
 import NestedValueOf from './utils/NestedValueOf';
@@ -27,11 +28,13 @@ function resolvePath(
   key: string,
   namespace?: string
 ) {
+  const fullKey = joinPath(namespace, key);
+
   if (!messages) {
     throw new Error(
       process.env.NODE_ENV !== 'production'
         ? `No messages available at \`${namespace}\`.`
-        : undefined
+        : fullKey
     );
   }
 
@@ -43,10 +46,8 @@ function resolvePath(
     if (part == null || next == null) {
       throw new Error(
         process.env.NODE_ENV !== 'production'
-          ? `Could not resolve \`${key}\` in ${
-              namespace ? `\`${namespace}\`` : 'messages'
-            }.`
-          : undefined
+          ? `Could not resolve \`${fullKey}\` in messages.`
+          : fullKey
       );
     }
 
@@ -110,7 +111,7 @@ function getMessagesOrError<Messages extends AbstractIntlMessages>({
       throw new Error(
         process.env.NODE_ENV !== 'production'
           ? `No messages for namespace \`${namespace}\` found.`
-          : undefined
+          : namespace
       );
     }
 
@@ -218,11 +219,7 @@ function createBaseTranslatorImpl<
       );
     }
 
-    function joinPath(parts: Array<string | undefined>) {
-      return parts.filter((part) => part != null).join('.');
-    }
-
-    const cacheKey = joinPath([locale, namespace, key, String(message)]);
+    const cacheKey = joinPath(locale, namespace, key, String(message));
 
     let messageFormat: IntlMessageFormat;
     if (messageFormatCache?.has(cacheKey)) {
@@ -233,18 +230,18 @@ function createBaseTranslatorImpl<
         if (Array.isArray(message)) {
           code = IntlErrorCode.INVALID_MESSAGE;
           if (process.env.NODE_ENV !== 'production') {
-            errorMessage = `Message at \`${joinPath([
+            errorMessage = `Message at \`${joinPath(
               namespace,
               key
-            ])}\` resolved to an array, but only strings are supported. See https://next-intl-docs.vercel.app/docs/usage/messages#arrays-of-messages`;
+            )}\` resolved to an array, but only strings are supported. See https://next-intl-docs.vercel.app/docs/usage/messages#arrays-of-messages`;
           }
         } else {
           code = IntlErrorCode.INSUFFICIENT_PATH;
           if (process.env.NODE_ENV !== 'production') {
-            errorMessage = `Message at \`${joinPath([
+            errorMessage = `Message at \`${joinPath(
               namespace,
               key
-            ])}\` resolved to an object, but only strings are supported. Use a \`.\` to retrieve nested messages. See https://next-intl-docs.vercel.app/docs/usage/messages#structuring-messages`;
+            )}\` resolved to an object, but only strings are supported. Use a \`.\` to retrieve nested messages. See https://next-intl-docs.vercel.app/docs/usage/messages#structuring-messages`;
           }
         }
 

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

@@ -1,4 +1,5 @@
 import IntlError from './IntlError';
+import joinPath from './joinPath';
 
 /**
  * Contains defaults that are used for all entry points into the core.
@@ -10,7 +11,7 @@ export function defaultGetMessageFallback(props: {
   key: string;
   namespace?: string;
 }) {
-  return [props.namespace, props.key].filter((part) => part != null).join('.');
+  return joinPath(props.namespace, props.key);
 }
 
 export function defaultOnError(error: IntlError) {

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

@@ -0,0 +1,3 @@
+export default function joinPath(...parts: Array<string | undefined>) {
+  return parts.filter(Boolean).join('.');
+}

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

@@ -1,5 +1,6 @@
 import AbstractIntlMessages from './AbstractIntlMessages';
 import IntlError, {IntlErrorCode} from './IntlError';
+import joinPath from './joinPath';
 
 function validateMessagesSegment(
   messages: AbstractIntlMessages,
@@ -17,7 +18,7 @@ function validateMessagesSegment(
       validateMessagesSegment(
         messageOrMessages,
         invalidKeyLabels,
-        [parentPath, key].filter((part) => part != null).join('.')
+        joinPath(parentPath, key)
       );
     }
   });

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

@@ -595,7 +595,7 @@ describe('error handling', () => {
 
     const error: IntlError = onError.mock.calls[0][0];
     expect(error.message).toBe(
-      'MISSING_MESSAGE: Could not resolve `label` in `Component`.'
+      'MISSING_MESSAGE: Could not resolve `Component.label` in messages.'
     );
     expect(error.code).toBe(IntlErrorCode.MISSING_MESSAGE);
     screen.getByText('Component.label');