Skip to content

Commit

Permalink
refactor: improve error message in Trans (#1880)
Browse files Browse the repository at this point in the history
  • Loading branch information
vonovak authored Mar 11, 2024
1 parent 93204b9 commit 8d96c7d
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 7 deletions.
9 changes: 7 additions & 2 deletions packages/react/src/I18nProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 12 additions & 2 deletions packages/react/src/Trans.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
11 changes: 8 additions & 3 deletions packages/react/src/Trans.tsx
Original file line number Diff line number Diff line change
@@ -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 })
}

0 comments on commit 8d96c7d

Please sign in to comment.