title: TS2786 'Component' cannot be used as a JSX component
body: <p>I have a React Typescript application that won't compile. Many components have a render method that is typed to return <code>React.ReactNode</code> or <code>React.ReactElement</code>. On compile, many errors similar to the following are reported:</p>
  <pre><code>TS2786: 'MessagesWidget' cannot be used as a JSX component.
   Its instance type 'MessagesWidget' is not a valid JSX element.
   The types returned by 'render()' are incompatible between these types.
   Type 'React.ReactNode' is not assignable to type 'import(&quot;/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index&quot;).ReactNode'.
  </code></pre>
  <p>Why is the compiler expecting <code>ReactNode</code> as defined by the types bundled with <code>react-calendar</code>? I do have <code>@types/react-dom</code> installed as a dev dependency.</p>
  <p>Other information that might be relevant:</p>
  <ol>
  <li>This project was compiling until a couple of days ago and there were no code changes when the compile started failing, so I suspect that a package update triggered this (even if that's not the root cause). The only dependencies that were updated in the time window when the compile started failing were <code>@types/react</code> and <code>@types/react-dom</code>. Rolling these packages back to an older version did not fix the issue, however.</li>
  <li>Changing my components render methods to return <code>JSX.Element</code> removes the compiler error, but there are third party components in the application where this is not possible.</li>
  </ol>