Uncaught (promessa) TypeError: Impossibile leggere la proprietà 'createElement' di undefined (...)

Question

Avevo bisogno di rifattorizzare il mio componente funzionale stateless in una classe. Quando l'ho fatto, continuo a ricevere un errore in cui sembra che React stesso non sia definito.

import React from 'react'; 
import { Cell } from 'fixed-data-table'; 

const DataCell = ({rowIndex, columnKey, data, onMessageClicked, ...props}) => { 
    return (
    <Cell {...props} onClick={onMessageClicked(data[rowIndex].Id)}> 
     {data[rowIndex][columnKey]} 
    </Cell> 
); 
}; 

export default DataCell; 

a

import { React, Component } from 'react'; 
import { Cell } from 'fixed-data-table'; 

class DataCell extends Component { 

    onCellClicked() { 
    this.props.onMessageClicked(this.props.data[this.props.rowIndex].Id); 
    } 

    render() { 
    const {rowIndex, columnKey, data, ...props} = this.props; 
    return (
     <Cell {...props} onClick={onCellClicked}> 
     {data[rowIndex][columnKey]} 
     </Cell> 
    ); 
    } 
} 

export default DataCell; 

bundle.js:43248 Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)

e quando vado a quella linea vedo

return _react.React.createElement(

io non capisco. Come faccio a eseguire il debug/risolvere questo problema?

Il mio codice completo per questa app è here nel caso in cui il codice che sto postando non sia collegato in qualche modo.

Grazie!

Answer 1

Oh ...

import { React, Component } from 'react';

necessità di essere

import React, { Component } from 'react';

:)

Answer 2

Il PO ha risposto alla domanda è di per sé, ma senza motivo Quindi, ecco la ragionare! {Direttamente citando https://github.com/facebook/react/issues/2607#issuecomment-225911048 "}

import { React, Component } from 'react'; 

non è corretto, dovrebbe essere

import React, { Component } from 'react'; 

Non c'è il nome di esportazione di nome reagire. E 'confusa, perché Reagire è un modulo CommonJS, e visto che tu sei . utilizzando le importazioni ES6, Babel cerca di mappare la semantica, ma non corrispondono esattamente {Component} realtà afferra componente dal Reagire stesso modo si potrebbe semplicemente:

import React from 'react' 

e utilizzare React.Component invece se è meno confuso.

Answer 3

Per me a macchina la soluzione era:

import * as React from 'react';