Error `Types of property 'dangerouslySetInnerHTML' are incompatible` for new react package version

[vitonsky]

The problem

In my project, a file

https://github.com/translate-tools/linguist/blob/f722a8faf3b21a90134bcf33ba1660bcea2fd9f5/src/components/primitives/Select/Select.registry/desktop.ts#L14

Generate error

TS2322: Type 'ComponentType<{ visible?: boolean | undefined; scope?: RefObject<HTMLElement> | undefined; keepMounted?: boolean | undefined; hasTail?: boolean | undefined; tailRef?: Ref<...> | undefined; ... 261 more ...; innerRef?: Ref<...> | undefined; } & ... 5 more ... & ObjectsUnionToIntersection<...>>' is not assignable to type 'ComponentType<ISelectPopup>'.
  Type 'FunctionComponent<{ visible?: boolean | undefined; scope?: RefObject<HTMLElement> | undefined; keepMounted?: boolean | undefined; hasTail?: boolean | undefined; tailRef?: Ref<...> | undefined; ... 261 more ...; innerRef?: Ref<...> | undefined; } & ... 5 more ... & ObjectsUnionToIntersection<...>>' is not assignable to type 'ComponentType<ISelectPopup>'.
    Type 'FunctionComponent<{ visible?: boolean | undefined; scope?: RefObject<HTMLElement> | undefined; keepMounted?: boolean | undefined; hasTail?: boolean | undefined; tailRef?: Ref<...> | undefined; ... 261 more ...; innerRef?: Ref<...> | undefined; } & ... 5 more ... & ObjectsUnionToIntersection<...>>' is not assignable to type 'FunctionComponent<ISelectPopup>'.
      Types of parameters 'props' and 'props' are incompatible.
        Type 'PropsWithChildren<ISelectPopup>' is not assignable to type 'PropsWithChildren<{ visible?: boolean | undefined; scope?: RefObject<HTMLElement> | undefined; keepMounted?: boolean | undefined; hasTail?: boolean | undefined; tailRef?: Ref<...> | undefined; ... 261 more ...; innerRef?: Ref<...> | undefined; } & ... 5 more ... & ObjectsUnionToIntersection<...>>'.
          Type 'PropsWithChildren<ISelectPopup>' is not assignable to type '{ visible?: boolean | undefined; scope?: RefObject<HTMLElement> | undefined; keepMounted?: boolean | undefined; hasTail?: boolean | undefined; tailRef?: Ref<...> | undefined; ... 261 more ...; innerRef?: Ref<...> | undefined; }'.
            Types of property 'dangerouslySetInnerHTML' are incompatible.
              Type '{ __html: string | TrustedHTML; } | undefined' is not assignable to type '{ __html: string; } | undefined'.
                Type '{ __html: string | TrustedHTML; }' is not assignable to type '{ __html: string; }'.
                  Types of property '__html' are incompatible.
                    Type 'string | TrustedHTML' is not assignable to type 'string'.
                      Type 'TrustedHTML' is not assignable to type 'string'.

Error occurs, because your library compile react types to a bundle, so file https://www.unpkg.com/browse/react-elegant-ui@0.3.3/esm/components/Popup/Popup.bundle/desktop.d.ts contains react property types from not actual version

    dangerouslySetInnerHTML?: {
        __html: string;
    } | undefined;

Actual types declaration from @types/react/index.d.ts have updated type

React types version:

"@types/react": {
            "version": "17.0.58",
            "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.58.tgz",
            "integrity": "sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A==",
            "dev": true,
            "requires": {
                "@types/prop-types": "*",
                "@types/scheduler": "*",
                "csstype": "^3.0.2"
            }
        },

How to fix a problem

We have to investigate how to fix the problem, but some ways i see is

• Do not include/inline libraries types to a build files if it possible
• Define in a package.json a locked version of react that you support. In this case, you may release library versions that supports different versions of react