Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & TransProps' on Trans component

[arnaud9145]

Describe the bug
Hello!

First, thanks for the awesome lib. I've been using it for a year on a react native project, it's working like a charm !

I am getting the following error in a new react/nextjs project :

using the Trans component from @lingui/macro (not @lingui/react I checked).

I juste installed a fresh nextjs project using yarn create next-app --typescript, and than installed lingui following the installation process. Everything works fine, text gets translated, but in the editor there is an error (see screenshot).

To Reproduce
Create a new nextjs project using yarn create next-app --typescript

than installed lingui

package.json looks like :

{
  "name": "example-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@lingui/core": "^3.13.2",
    "@lingui/macro": "^3.13.2",
    "@lingui/react": "^3.13.2",
    "@types/react": "18.0.5",
    "make-plural": "^7.1.0",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "typescript": "4.6.3",
    "webpack": "^5.72.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@lingui/cli": "^3.13.2",
    "@lingui/loader": "3.13.2",
    "@types/node": "17.0.24",
    "@types/react-dom": "18.0.0",
    "babel-plugin-macros": "^3.1.0",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "eslint-config-prettier": "^8.5.0"
  }
}

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    // These are all the locales supported in the app
    locales: ["en", "fr"],
    // This is the default locale to be used when visiting
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

lingui.config.js

module.exports = {
  locales: ["en", "fr", "pseudo"],
  pseudoLocale: "pseudo",
  sourceLocale: "en",
  fallbackLocales: {
    default: "en",
  },
  catalogs: [
    {
      path: "src/locales/{locale}/messages",
      include: ["src/pages"],
    },
  ],
  format: "po",
};

and add a <Trans somewhere :

import { Trans } from "@lingui/macro"

export default function App() {

  //                v    error is on <Trans component
   return <Trans>This should be translated!</Trans>
}

Expected behavior
No typescript error

Additional context
Add any other context about the problem here.

• jsLingui version 3.13.2
• Babel version @babel/core@7.17.9
• Babel config

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "macros"
    ]
}

PS: not sure that it is lingui related, maybe @types/react related ? Can you point me in the right direction ? Thanks a lot !

[daniel-rodrigue]

I'm having the same error in my react project since I upgraded to React 18. The reason seems to be that children needs to be declared manually now or use React's PropsWithChildren helper.

As far as I understand it, Lingui needs to be updated to declare children on <I18NProvider> and <Trans> components.

[arnaud9145]

That solved the problem thanks ! I created a patch using patch-package :

diff --git a/node_modules/@lingui/macro/index.d.ts b/node_modules/@lingui/macro/index.d.ts
index ec9e66f..9287a46 100644
--- a/node_modules/@lingui/macro/index.d.ts
+++ b/node_modules/@lingui/macro/index.d.ts
@@ -1,4 +1,4 @@
-import type { ReactElement, ComponentType, ReactNode } from "react"
+import type { ReactElement, ComponentType, ReactNode, PropsWithChildren } from "react"
 import type { MessageDescriptor, I18n } from "@lingui/core"
 import type { TransRenderProps } from "@lingui/react"
 
@@ -202,7 +202,7 @@ export type SelectProps = {
 } & TransProps &
   Values
 
-export const Trans: ComponentType<TransProps>
+export const Trans: ComponentType<PropsWithChildren<TransProps>>
 export const Plural: ComponentType<ChoiceProps>
 export const Select: ComponentType<SelectProps>
 export const SelectOrdinal: ComponentType<ChoiceProps>

I also had the problem with I18nProvider :

diff --git a/node_modules/@lingui/react/cjs/I18nProvider.d.ts b/node_modules/@lingui/react/cjs/I18nProvider.d.ts
index a6a440f..b4d7ba4 100644
--- a/node_modules/@lingui/react/cjs/I18nProvider.d.ts
+++ b/node_modules/@lingui/react/cjs/I18nProvider.d.ts
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ComponentType, ReactNode } from "react";
+import React, { FunctionComponent, ComponentType, ReactNode, PropsWithChildren } from "react";
 import { I18n } from "@lingui/core";
 export declare type I18nContext = {
     i18n: I18n;
@@ -14,5 +14,5 @@ export declare type I18nProviderProps = I18nContext & {
 };
 export declare function useLingui(): I18nContext;
 export declare function withI18n(o?: object): <P extends withI18nProps>(Component: ComponentType<P>) => React.ComponentType<Omit<P, 'i18n'>>;
-export declare const I18nProvider: FunctionComponent<I18nProviderProps>;
+export declare const I18nProvider: FunctionComponent<PropsWithChildren<I18nProviderProps>>;
 //# sourceMappingURL=I18nProvider.d.ts.map
\ No newline at end of file

[X-neuron]

same problem when use it with typescript and react18.
but no error occur when use javascript and react18

[semoal]

Just released 3.13.3 with the according fix. Enjoy! 🥳