title: Hundreds of JSX element type 'xxx' is not a constructor function for JSX elements?
body: <p>I inherited a project in React (with Redux and Antd), ASP.NET, and C# and I am getting literally hundreds of errors of the following kind:</p>
  
  <blockquote>
    <p>TS2605    (TS) JSX element type 'xxx' is not a constructor function for JSX elements.</p>
  </blockquote>
  
  <p>The programmers who gave me the code claim that they do not "have" these errors (so they might be just ignoring them since the code compiles anyhow). I figured that it might have to do with my React version (I have the newest). Downgrading was suggested by different resources (see below) as work-around, but this is not an option for me.</p>
  
  <p>I tested different ways of importing React, but that did not reduce the number of errors. Here one example where I see red underlined code in my Visual Studio (Professional 2017): </p>
  
  <pre><code>import * as React from "react";
  // ... 
  import { DatePicker } from "antd"; // I also load other things from antd
  const { MonthPicker } = DatePicker;
  // ... 
  &lt;MonthPicker 
       format="MMMM YYYY"
        style={{ width: 150 }}
        placeholder="Date"
        onChange={(e) =&gt; { this.handleSelectorChange("Date", e) }}
       value={this.props.selectedDate !== null ? moment(this.props.selectedDate) : null}
  /&gt;
  </code></pre>
  
  <p>In other words, the error occurs both for user defined elements <code>xxx</code> as well as for standard ones like <code>MonthPicker</code>. <strong>What does the error exactly mean and how do I fix it?</strong> </p>
  
  <p>The interesting thing is that the project runs anyhow, although the errors occur.</p>
  
  <h3>EDIT: Background information</h3>
  
  <p>My <code>package.json</code> reads</p>
  
  <pre><code>^{
    "version": "1.3.3.7",
    "name": "myProject.UI",
    "private": true,
    "scripts": {
      "npm audit": "npm audit",
      "webpack": "webpack -w",
      "webpack-prod": "webpack -p",
      "version": "node --version"
    },
    "dependencies": {
      "antd": "^2.10.0",
      "babel-polyfill": "^6.23.0",
      "download": "^6.2.5",
      "immutable": "^3.8.1",
      "moment": "^2.24.0",
      "react": "15.5.3",
      "react-dom": "15.5.3",
      "react-redux": "^5.0.4",
      "react-router-dom": "^4.1.1",
      "react-router-redux": "^5.0.0-alpha.6",
      "redux": "^3.6.0",
      "redux-saga": "^0.14.8",
      "reselect": "^3.0.0",
      "whatwg-fetch": "^2.0.3"
    },
    "devDependencies": {
      "@types/react": "15.0.21",
      "@types/react-dom": "0.14.23",
      "@types/react-redux": "^4.4.40",
      "@types/react-router-dom": "^4.0.4",
      "@types/react-router-redux": "^5.0.0",
      "awesome-typescript-loader": "3.1.2",
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-plugin-transform-es2015-parameters": "^6.24.1",
      "babel-preset-env": "^1.4.0",
      "css-loader": "^3.2.0",
      "extract-text-webpack-plugin": "^2.1.0",
      "less": "^2.7.2",
      "less-loader": "^4.0.3",
      "source-map-loader": "0.2.1",
      "style-loader": "^0.17.0",
      "ts-loader": "2.0.3",
      "typescript": "2.2.1",
      "webpack": "^2.7.0"
    }
  }
  
  </code></pre>
  
  <p>My <code>tsconfig.json</code> looks as follows:</p>
  
  <pre><code>{
    "compilerOptions": {
      "noImplicitAny": false,
      "noEmitOnError": true,
      "removeComments": false,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "moduleResolution": "node",
      "jsx": "react",
      "target": "es6"
    },
    "exclude": [
      "node_modules",
      "wwwroot"
    ]
  }
  </code></pre>
  
  <h3>Resources</h3>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/54679118/jsx-element-type-element-is-not-a-constructor-function-for-jsx-elements">JSX element type &#39;Element[]&#39; is not a constructor function for JSX elements</a> </li>
  <li><a href="https://stackoverflow.com/questions/45970097/jsx-element-type-xxx-is-not-a-constructor-function-for-jsx-elements-property">JSX element type &#39;xxx&#39; is not a constructor function for JSX elements. Property &#39;yyy&#39; is protected in type &#39;xxx&#39; but public in type &#39;ElementClass&#39;</a></li>
  <li><a href="https://github.com/Microsoft/TypeScript-React-Starter/issues/45" rel="nofollow noreferrer">https://github.com/Microsoft/TypeScript-React-Starter/issues/45</a> </li>
  </ul>
  
  <p><strong>Edit as of 2019-09-16:</strong> More resources </p>
  
  <ul>
  <li><a href="https://github.com/ant-design/ant-design/issues/4892" rel="nofollow noreferrer">https://github.com/ant-design/ant-design/issues/4892</a></li>
  <li><a href="https://stackoverflow.com/questions/42720532/jsx-element-type-counterdisplay-is-not-a-constructor-function-for-jsx-elements">JSX element type &#39;CounterDisplay&#39; is not a constructor function for JSX elements. Types of property &#39;refs&#39; are incompatible</a></li>
  </ul>