Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)

24
votes

I needed to refactor my stateless functional component to a class. When I did so though, I keep getting an error where it looks like React itself is undefined.

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;

to

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(…)

and when I go to that line I see

return _react.React.createElement(

I don't get it. How do I debug/fix this?

My full code for this app is here in case the code I'm posting is not related somehow.

Thanks!

3
javascriptreactjs

3 Answers

86
votes

Oh...

import { React, Component } from 'react';

needs to be

import React, { Component } from 'react';

:)

23
votes

The OP has answered the question it self but with no reason so here's the reason! {Directly quoting from https://github.com/facebook/react/issues/2607#issuecomment-225911048" }

import { React, Component } from 'react';

is incorrect, should be

import React, { Component } from 'react';

There is no named export named React. It is confusing because React is a CommonJS module, and since you’re using ES6 imports, Babel tries to map the semantics but they don’t match exactly. { Component } actually grabs Component from React itself so you might just:

import React from 'react'

and use React.Component instead if it’s less confusing.

8
votes

For me in TypeScript the solution was:

import * as React from 'react';