react-data-grid: createElement Typ ist ungültig mit typescript & webpack external

Question

Hallo Leute, ich versuche sowohl die react-data-grid als auch die react-data-grid-addons Bibliotheken als extern im webpack zu setzen, damit sie es nicht tun Ich werde nicht in meine Asset-Bündelung einbezogen. Ich hatte alles in Ordnung, bevor ich versuchte, alles auf den externen Teil von webpack zu verschieben. Ich habe die folgende Fehlermeldung in ein paar Stacktraces gefunden, aber konnte es nicht zum Laufen bringen. Vielleicht ist mein Anwendungsfall etwas anders und das Problem liegt woanders? Dies ist die Nachricht, die ich bekomme:

React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für Composite-Komponenten) aber erhalten: Objekt. Überprüfen Sie die Rendermethode Table.

Ich verwende die folgenden Versionen in meiner 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" 
    }, 

In den Äußerlichkeiten meiner webpack module.exports ich habe:

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

Und schließlich die gesamte Logik für die Tabelle Ich versuche zu rendern. Ich habe versucht, mit den Importen oben herumzuspielen, ohne Erfolg :(Gibt es etwas, das ich nicht richtig mache? Die Tabelle ist das Beispiel, das ich aus dem filterbaren & sortierbaren Tabellenbeispiel von react-data-grid verwendet habe (http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid). Hatte aber es zu einer Typoskript Struktur zu ändern.

/** @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"), 
); 

Answer 1

ich normalerweise diese Fehlermeldung erhalten, wenn meine Import Aussagen falsch sind. Sie können diese importieren versuchen * als RRGA von „reagieren-Daten-Grid-addons“ RRGA.Toolbar und RRGA.Data verwenden und wo auch immer Sie Toolbar und Daten verwenden, selbst in den jsx Tags

import * as RRGA from "react-data-grid-addons"; 

und in Ihrem machen functio;.. n und andere Orte, wo Sie Toolbar und Daten verwenden

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