preact: Typescript error 'ComponentChildren' is not assignable to type 'ReactNode'.

• Check if updating to the latest Preact version resolves the issue

Describe the bug

We are trying to migrate our app to Typescript but with a simple component like this I got an error:

TS2322: Type ‘ComponentChildren’ is not assignable to type ‘ReactNode’.   Type ‘bigint’ is not assignable to type ‘ReactNode’.

export const SectionTitle = ({ children }: {children: ComponentChildren}) => {
    return (
        <div>
            {children}
        </div>
    );
};

To Reproduce

The app contain multiple packages and I guess one of them is causing the error. I write the issue here because I’m pretty sure is related to this one: https://github.com/preactjs/preact/issues/2748

It compiles using Babel, and has multiple packages, one of them probably uses the react types which are conflicting with the preact ones(???)

Clone the fork im working on and run npm install:

git clone -b f/implement_new_landing https://github.com/selankon/lime-app/

Then run tsc to see the errors over the file I’m working on:

tsc plugins/lime-plugin-rx/src/components/components.tsx

Expected behavior

This shouldn’t have any errors, but instead I got this one described above.

I followed the instructions on preact docs https://preactjs.com/guide/v10/typescript/#typescript-configuration configuring babel and TS with this options:

• babel-config.js

module.exports = {
    presets: [
        "@babel/preset-env",
        ["@babel/typescript", { jsxPragma: "h" }],
        "@lingui/babel-preset-react",
        "preact",
    ],
    plugins: [
        "macros",
        [
            "@babel/plugin-transform-react-jsx",
            {
                pragma: "h",
                pragmaFrag: "Fragment",
            },
        ],
        [
            "babel-plugin-jsx-pragmatic",
            {
                module: "preact",
                import: "h",
                export: "h",
            },
        ],
    ],
};

• tsconfig.json

/* Module Resolution Options */
    "moduleResolution": "Node",
    "esModuleInterop": true,
    /* Advanced Options */
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"],

Without success.

I’m working on a simplier error but for the moment I didn’t reproduced the error. As I said, probably a dependency is causing the conflict. Any help is welcome, I will update here if can help to anyone on the future.

Thanks