react-data-grid：使用typescript和webpack externals，createElement类型无效

大家好，我正在尝试将react-data-grid和react-data-grid-addons库设置为webpack中的外部，因此它们不会包含在我的资产捆绑中 . 在尝试将其全部移动到webpack的外部部分之前，我已经完成了所有工作 . 我在一些堆栈跟踪中发现了以下错误消息，但无法让它工作 . 也许我的用例有点不同，问题出在其他地方？这是我收到的消息：

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object . 检查表的render方法 .

我在package.json中使用以下版本：

"dependencies": {
    "react": "15.4.2",
    "react-data-grid": "2.0.60",
    "react-data-grid-addons": "2.0.60",
    "react-dom": "15.4.2"
  },

在我的webpack module.exports的外部我有：

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
  "react-data-grid": "ReactDataGrid",
  "react-data-grid-addons": "ReactDataGridPlugins"
}

最后，表格的整个逻辑我试着玩顶部的导入，但无济于事:(有什么我做得不对吗？表格是我从可过滤和可排序的表格示例中使用的示例由react-data-grid（http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid）给出 . 但是必须将它改为打字稿结构 .

/** @module Global *//***/

import * as React from "react";
import * as ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import * as ReactDOM from "react-dom";

const Selectors = Data.Selectors;

/**
 * Row interface
 */
interface Row {
    id: number;
    title: string;
    count: number;
}

/**
 * Column interface
 */
interface Column {
    key: keyof Row;
    name: string;
    filterable?: boolean;
    sortable?: boolean;
}

/**
 * State interface
 */
interface State {
    rows: Row[] | null;
    filters: any;
    sortColumn: string | null;
    sortDirection: string | null;
}

/**
 * Table component
 */
class Table extends React.Component<{}, State> {
    private columns: Column[];
    private rows: Row[];

    public state: State = {
        rows: null,
        filters: {},
        sortColumn: null,
        sortDirection: null,
    };

    /**
     * Table class constructor
     * @param props
     * @param context
     */
    constructor(props: any, context: any) {
        super(props, context);
        this.columns = [
            { key: "id", name: "ID", filterable: true, sortable: true },
            { key: "title", name: "Title", filterable: true, sortable: true },
            { key: "count", name: "Count", filterable: true, sortable: true },
        ];
        this.rows = this.createRows();

        this.state.rows = this.rows;

        this.handleGridSort = this.handleGridSort.bind(this);
        this.handleFilterChange = this.handleFilterChange.bind(this);
        this.onClearFilters = this.onClearFilters.bind(this);
    }

    /**
     * Create the table rows
     * @returns {Row[]}
     */
    public createRows(): Row[]  {
        const rows = [];
        for (let i = 1; i < 1000; i++) {
            rows.push({
                id: i,
                title: "Title " + i,
                count: i * 1000,
            });
        }
        return rows;
    }

    /**
     * Get the table rows as an array of Row objects
     * @returns {Row[]}
     */
    public getRows(): Row[] {
        return Selectors.getRows(this.state) as Row[];
    }

    /**
     * Get the amount of rows
     * @returns {number}
     */
    public getSize(): number {
        return this.getRows().length;
    }

    /**
     * Get a specific row
     * @param {number} i
     * @returns {Row}
     */
    public rowGetter(i: number): Row {
        const rows = this.getRows();
        return rows[i];
    }

    /**
     * Handle the filter change
     * @param filter
     */
    public handleFilterChange(filter: any): void {
        const newFilters = {...this.state.filters};
        if (filter.filterTerm) {
            newFilters[filter.column.key] = filter;
        } else {
            delete newFilters[filter.column.key];
        }

        this.setState({ filters: newFilters });
    }

    /**
     * Handle the table sorting
     * @param {string} sortColumn
     * @param {string} sortDirection
     */
    public handleGridSort(sortColumn: string, sortDirection: string): void {
        this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });
    }

    /**
     * Handles the clearing of the filters
     */
    public onClearFilters(): void {
        this.setState({ filters: {} });
    }

    /**
     * Render table
     * @returns {any}
     */
    public render(): any {
        // console.log(this);
        return  (
            <ReactDataGrid
                columns={this.columns}
                rowGetter={this.rowGetter.bind(this)}
                rowsCount={this.getSize()}
                minHeight={500}
                toolbar={<Toolbar enableFilter={true} />}
                enableCellSelect={true}
                onGridSort={this.handleGridSort}
                onAddFilter={this.handleFilterChange}
                onClearFilters={this.onClearFilters}
            />);
    }
}

ReactDOM.render(
    <Table />,
    document.getElementById("table"),
);