refactor: improve error message in Trans (#1880)

packages/react/src/I18nProvider.tsx

@@ -14,17 +14,22 @@ export type I18nProviderProps = Omit<I18nContext, "_"> & {
 
 export const LinguiContext = React.createContext<I18nContext | null>(null)
 
-export function useLingui(): I18nContext {
+export const useLinguiInternal = (devErrorMessage?: string): I18nContext => {
   const context = React.useContext(LinguiContext)
 
   if (process.env.NODE_ENV !== "production") {
     if (context == null) {
-      throw new Error("useLingui hook was used without I18nProvider.")
+      throw new Error(
+        devErrorMessage ?? "useLingui hook was used without I18nProvider."
+      )
     }
   }
 
   return context as I18nContext
 }
+export function useLingui(): I18nContext {
+  return useLinguiInternal()
+}
 
 export const I18nProvider: FunctionComponent<I18nProviderProps> = ({
   i18n,

packages/react/src/Trans.test.tsx

@@ -104,11 +104,21 @@ describe("Trans component", () => {
       })
     })
 
-    it("when there's no i18n context", () => {
+    it("when there's no i18n context available", () => {
       const originalConsole = console.error
       console.error = jest.fn()
 
-      expect(() => render(<Trans id="unknown" />)).toThrow()
+      expect(() => render(<Trans id="unknown" />))
+        .toThrowErrorMatchingInlineSnapshot(`
+        "Trans component was rendered without I18nProvider.
+        Attempted to render message: undefined id: unknown. Make sure this component is rendered inside a I18nProvider."
+      `)
+      expect(() =>
+        render(<Trans id="unknown" message={"some valid message"} />)
+      ).toThrowErrorMatchingInlineSnapshot(`
+        "Trans component was rendered without I18nProvider.
+        Attempted to render message: some valid message id: unknown. Make sure this component is rendered inside a I18nProvider."
+      `)
 
       console.error = originalConsole
     })

packages/react/src/Trans.tsx

@@ -1,9 +1,14 @@
 import React from "react"
 
-import { useLingui } from "./I18nProvider"
-import { TransNoContext, TransProps } from "./TransNoContext"
+import { useLinguiInternal } from "./I18nProvider"
+import { TransNoContext, type TransProps } from "./TransNoContext"
 
 export function Trans(props: TransProps): React.ReactElement<any, any> | null {
-  const lingui = useLingui()
+  let errMessage = undefined
+  if (process.env.NODE_ENV !== "production") {
+    errMessage = `Trans component was rendered without I18nProvider.
+Attempted to render message: ${props.message} id: ${props.id}. Make sure this component is rendered inside a I18nProvider.`
+  }
+  const lingui = useLinguiInternal(errMessage)
   return React.createElement(TransNoContext, { ...props, lingui })
 }