Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts

バージョン

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.2",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",

現象

React と React Redux を使用しているとき、

import { connect } from 'react-redux';

connect を使用すると、以下のようなコンパイルエラーが発生することがある。 型の整合が合っていないだけで、問題なく動作する。

class HistoryContainer extends React.Component<CombinedProps, State> {
...
}

export default connect<StateProps, DispatchProps, Props, ReduxStoreState>(
  mapStateToProps,
  mapDispatchToProps
)(HistoryContainer);

Argument of type 'typeof HistoryContainer' is not assignable to parameter of type 'ComponentType<never>'.
  Type 'typeof HistoryContainer' is not assignable to type 'ComponentClass<never, any>'.
    Types of property 'contextType' are incompatible.
      Type 'React.Context<any> | undefined' is not assignable to type 'import("/home/fai/repo/chatgpt-note/node_modules/react-redux/node_modules/@types/react/index").Context<any> | undefined'.
        Type 'React.Context<any>' is not assignable to type 'import("/home/fai/repo/chatgpt-note/node_modules/react-redux/node_modules/@types/react/index").Context<any>'.
          The types returned by 'Provider(...)' are incompatible between these types.
            Type 'React.ReactNode' is not assignable to type 'import("/home/fai/repo/chatgpt-note/node_modules/react-redux/node_modules/@types/react/index").ReactNode'.
              Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
                Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2345)

解決策

以下リンクの通り。

github.com

tsconfig.json に次を追記する

{
  "compilerOptions": {
    "paths": {
      "react": [ "./node_modules/@types/react" ]

これは本質的な解決策ではない気がするが、手元では治ったのでヨシ