From ed3b124d18b7c215380d89c14547b630a6155b56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ehrlich?= <tomas.ehrlich@gmail.com>
Date: Sun, 1 Nov 2020 14:19:07 +0100
Subject: [PATCH] fix: force return type of Trans component

Closes #801
---
 packages/react/src/Trans.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/Trans.tsx b/packages/react/src/Trans.tsx
index 7809aa826..dd5f29900 100644
--- a/packages/react/src/Trans.tsx
+++ b/packages/react/src/Trans.tsx
@@ -10,21 +10,17 @@ export type TransRenderProps = {
   message?: string | null
 }
 
-export type TransRenderType =
-  | React.ComponentType<TransRenderProps>
-  | React.ElementType<TransRenderProps>
-
 export type TransProps = {
   id: string
   message?: string
   values: Object
   components: { [key: string]: React.ElementType | any }
   formats?: Object
-  component?: TransRenderType
-  render?: (opts: TransRenderProps) => TransRenderType
+  component?: React.ComponentType<TransRenderProps>
+  render?: (props: TransRenderProps) => React.ReactElement<any, any> | null
 }
 
-export function Trans(props: TransProps) {
+export function Trans(props: TransProps): React.ReactElement<any, any> | null {
   const { i18n, defaultComponent } = useLingui()
   const { render, component, id, message, formats } = props
 
@@ -66,7 +62,9 @@ export function Trans(props: TransProps) {
     : null
 
   if (render === null || component === null) {
-    return translation
+    // Although `string` is a valid react element, types only allow `Element`
+    // Upstream issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544
+    return (translation as unknown) as React.ReactElement<any, any>
   }
 
   const FallbackComponent = defaultComponent || React.Fragment