'Trans' cannot be used as a JSX component.

[jesec]

Describe the bug

'Trans' cannot be used as a JSX component.
  Its return type '"symbol" | "object" | "hr" | "s" | Element | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | ... 158 more ... | FunctionComponent<...>' is not a valid JSX element.
    Type '"symbol"' is not assignable to type 'Element | null'.ts(2786)

To Reproduce

import {Trans} from '@lingui/react';

<Trans
  id={id}
  values={{
    count,
    countElement: <span className="alert__count">{count}</span>,
  }}
/>

Expected behavior
<Trans /> is supposed to be a component.

Additional context
https://github.com/jesec/flood/blob/7e56cd99ac0e86207517af56ade9e7708d0f0688/client/src/javascript/components/alerts/Alert.tsx#L31

• jsLingui version:

"@lingui/babel-preset-react": "^2.9.2",
"@lingui/detect-locale": "^3.0.0",
"@lingui/loader": "^3.0.0",
"@lingui/react": "^3.0.0",

• Babel version npm list @babel/core

"@babel/core": "^7.12.0",

• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)

{
  "presets": [
    "@babel/env",
    "@babel/typescript",
    ["@babel/react", {"runtime": "automatic"}],
    "@lingui/babel-preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties", {"loose": false}],
    "@babel/proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

[tricoder42]

Released in 3.0.1. Consider donating using OpenCollective to support development and maintanence of this project 👍