Используйте библиотеку javascript внутри веб-приложения TypeScript React

Для JointJS нет обновленных привязок, поэтому я попробовал следующее: Рендеринг кода, поступающего из JointJS, в компонент React в файле .jsx.

Файл: Joint-editor.jsx

import React from 'react'
import $ from 'jquery'
import joint from 'jointjs'

export default class JointEditor extends React.Component {

  constructor(props){
    super(props)
  }

  render(){
    var graph = new joint.dia.Graph;

      //JointJS code using jQuery

      graph.addCells([rect, rect2, link]);

      return (<div id="myholder"></div>)
  }

}

А затем импорт этого компонента в другой компонент в файле .tsx.

Файл editor.tsx

import React = require('react')
import Header = require("./../Header/header")
import JointEditor = require('./joint-editor')

class DemoProps {
    public name: string;
    public age: string;
}

export class Editor extends React.Component<DemoProps, {}> {
    private foo: number;

    constructor(props: DemoProps) {
        super(props);
        this.foo = 42;
    }

    render() {
        return (
            <div>
                <Header.Header/>
                <JointEditor/>
                Hello {this.props.name}, you are {this.props.age} years old
                </div>
        );
    }
}

Это связывается с веб-пакетом и передается Babel (файл jsx) и TypeScript (tsx).

Теперь возникают 2 проблемы:

1. ОШИБКА в ... / editor.tsx (3,30): ошибка TS2307: не удается найти модуль './joint-editor'.

2. Я почти уверен, что возникнут проблемы с JointJS с использованием jQuery внутри метода render () React? Знаете ли вы какие-либо примеры, в которых jQuery успешно используется внутри компонента React?

Спасибо

ИЗМЕНИТЬ

Это мой webpack.config.js

var webpack=require('webpack');
module.exports={
    entry: ['./src/main.tsx'],
    output: {
        path: './target',
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    debug: true,
    devtool: 'cheap-eval-source-map',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['',  '.jsx','.ts', '.js', '.tsx',]
    },
    module: {
        loaders: [
            {
                test: /\.tsx$/,
                loader: 'react-hot!ts-loader'
            },{
                test:/\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader:"react-hot!babel-loader"
            },
            {
                test:/\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader:"babel-loader"
            }
        ]
    }
}