React.SFC gives Element vs ReactElement<any> error, ValidationMap

Question

When using React.SFC, typescript gives the following error:

Type '({ children }: { children?: ReactNode; }) => Element' is not 
assignable to type 'StatelessComponent<{}>'.
 Type 'Element' is not assignable to type 'ReactElement<any>'.
  Types of property 'type' are incompatible.
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.
    Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.
      Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
        Types of property 'propTypes' are incompatible.
          Type 'React.ValidationMap<any> | undefined' is not assignable to type 'import("/Users/jbernal/Documents/projects/BoostMobileUI/node_modules/@types/prop-types/index").ValidationMap<any> | undefined'.
            Type 'React.ValidationMap<any>' is not assignable to type 'import("/Users/jbernal/Documents/projects/BoostMobileUI/node_modules/@types/prop-types/index").ValidationMap<any>'.
              Index signatures are incompatible.
                Type '((object: any, key: string, componentName: string, ...rest: any[]) => Error | null) | undefined' is not assignable to type 'Validator<any>'.
                  Type 'undefined' is not assignable to type 'Validator<any>'.

This is the code:

import * as React from 'react';

import './Sidebar.scss';

export const Sidebar: React.SFC = ({ children }) => (
  <aside className="sidebar">
   {children}
  </aside>
);

I am also getting ValidationMap issues elsewhere, for example, when passing in this type of component into Material's react-ui library as a child of Tooltip.

Answer 1

I had this problem too and came here looking for an answer.

Turns out, I was working on a yarn workspaces monorepo and there were multiple node_modules using different versions of @types/react.

Here what solved the issue for me:

• Make all dependencies point to the same version at each package.json;
• Delete all the node_modules folders (maybe delete the yarn.lock file too);
• Run yarn install