import jsx file in tsx compilation error
<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>