Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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!

like image 960
magician11 Avatar asked May 21 '16 07:05

magician11


People also ask

What causes this TypeError-cannot read property'then'of undefined?

What Causes This TypeError. TypeError - Cannot read property 'then' of undefined is thrown when the caller is expecting a Promise to be returned and instead receives undefined. Let's consider the above examples. In Example 1, the getTaxAmount (price, taxRate) function, when called, should have returned a Promise that resolves to a value of 12.

What is the meaning of undefined in JavaScript?

Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.

How to fix TypeError while working with JavaScript promise?

Whenever you see this TypeError while working with JavaScript Promise, the first step is to inspect the code that was expected to return a Promise. After all, you get this error when calling the then () method on a Promise. And the TypeError indicates you are calling then () on undefined, which is a hint that the Promise itself is undefined.

Why is my promise not returning?

And the TypeError indicates you are calling then () on undefined, which is a hint that the Promise itself is undefined. The next step is to go and debug the code to figure out why a Promise is not returned. We looked at two different code examples to see what can potentially cause this error and how to resolve it.


2 Answers

Oh...

import { React, Component } from 'react';

needs to be

import React, { Component } from 'react';

:)

like image 114
magician11 Avatar answered Oct 16 '22 01:10

magician11


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.

like image 45
Kunal Avatar answered Oct 16 '22 02:10

Kunal