title: import jsx file in tsx compilation error
body: <p>I am trying to import jsx file in tsx file. This is causing the error </p>
  
  <blockquote>
    <p>error TS2604: JSX element type 'Test' does not have any construct or
    call signatures.</p>
  </blockquote>
  
  <p>I a using webpack , react, typescript, Import  tsx files no issues, but any jsx file is causing compilation error,   </p>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "typescript-babel-webpack",
    "version": "1.0.0",
    "description": "A simple lightweight TypeScript + Babel + Webpack project.",
    "scripts": {
      "build": "webpack"
    },
  
    "license": "",
    "devDependencies": {
      "babel-core": "^6.20.0",
      "babel-loader": "^6.2.9",
      "babel-plugin-transform-runtime": "^6.15.0",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "css-loader": "^0.26.1",
      "inline-style-prefixer": "^2.0.4",
      "react-style-proptype": "^1.4.0",
      "style-loader": "^0.13.1",
      "ts-loader": "^1.3.1",
      "typescript": "^2.1.4",
      "webpack": "^1.14.0",
      "webpack-dev-server": "^1.16.2",
      "@types/react": "^0.14.55",
      "@types/react-dom": "^0.14.19"
  
    },
    "dependencies": {
      "event-emitter-es6": "^1.1.5",
      "inline-style-prefixer": "^2.0.4",
      "react": "^15.4.1",
      "react-dom": "^15.4.1",
      "react-style-proptype": "^1.4.0"
    }
  }
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{   "compilerOptions": {
      "module": "commonjs",
       "target": "es6",
      "sourceMap": true,
      "jsx": "react",
       "allowJs":true
  
     },   "exclude": [
       "node_modules"   ] }
  </code></pre>
  
  <p>webpack.json</p>
  
  <pre><code>module.exports = {
    entry: [ './src/index.tsx'],
    output: {
      path: __dirname,
      filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
      extensions: ['', '.js', '.jsx','.ts','.tsx','.css']
    },
    module: {
      loaders: [
        { test: /\.css$/, exclude: /node_modules/,loader: "style!css" },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
          {
              test: /\.jsx$/,
              exclude: /node_modules/,
              loader: 'babel-loader'
          },
  
        { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/}
      ]
    }
  };
  </code></pre>
  
  <p>I was able to make it work by wrapping ReactComponenet from   jsx in a function  and use it in tsx.  here is the code</p>
  
  <p>tsx file </p>
  
  <pre><code>import * as React from  "react";
  import * as ReactDom from 'react-dom'
  import {componenetFactory} from './Test'
  
  export class SplitPaneCom  extends   React.Component&lt;any,any&gt;{
    constructor(props){
      super(props);
    }
  
    render(){
  
      let componentInstance=componenetFactory();
      return componentInstance;
    }
  
  }
  
  ReactDom.render(&lt;SplitPaneCom/&gt;,document.getElementById("jumboTron"));
  </code></pre>
  
  <p>jsx file</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  
  export  class TestComponenet extends  Component{
      constructor(props){
          super(props);
      }
  
  
      render(){
          return (&lt;div&gt;Testzcdf content&lt;/div&gt;);
      }
  }
  
  export let componenetFactory=function(){
      return &lt;TestComponenet/&gt;
  }
  </code></pre>
  
  <p>If I try to use TestComponenet  directly I get error, I am wrapping it in function and calling it in tsx.</p>