Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JSX element type 'ReactElement<any> | null' is not a constructor function for JSX elements

I have simple Paragraph component set up in a following way

import * as React from 'react';
import {Text} from 'react-native';

const { memo } = React;

/**
 * Component
 */
function Paragraph({ children }) {
  return (
    <Text>
      {children}
    </Text>
  );
}

export default memo(Paragraph);

Whenever I use <Paragraph /> in my application I receive following error from typescript:

JSX element type 'ReactElement | null' is not a constructor function for JSX elements. Type 'ReactElement' is not assignable to type 'Element'.ts(2605)

This happens to a lot of my elements and started happening since I updated to lates typings for react and react-native from definitely typed. I'm unable to pinpoint a change that might be causing this error.

like image 612
Ilja Avatar asked Dec 17 '18 20:12

Ilja


2 Answers

This is caused by different versions of typing libraries in the autogenerated files, probably messed up by updating it, remove node_modules and yarn.lock or package-lock.json then reinstall.

like image 73
ramirozap Avatar answered Nov 12 '22 04:11

ramirozap


Small tip: when it happens, it's easier to see where the error is coming from when you provide the component return type explicitly (here: React.FC):

const Paragraph: React.FC = ({ children }) => (
  <Text>
    {children}
  </Text>
);

If the error says something about the <Text /> component not returning ReactElement<any> | null, you know that component is the culprit. If not, it's most likely about types not being in sync just like @ramirozap suggested.

like image 27
Karol Majewski Avatar answered Nov 12 '22 04:11

Karol Majewski