React and Meteor “Uncaught TypeError: Cannot read property 'createElement' of undefined”

Question

I've seen the question asked before, and I've done everything that has been suggested:

remove the curly brackets from the import statement of the component
imported React without the curly brackets
I've tried it with the curly brackets

index.hmtl

<head>
    <title>My ChatApp</title>
</head>

<body>
    <div id="app"></div>
</body>

index.js

import { Meteor } from "meteor/meteor";
import React from "react";
import { render } from "react-dom";

import ChatComponent from "../../ui/App";

Meteor.startup(() => {
  render(<ChatComponent />, document.getElementById("app"));
});

App.js

import { React, Component } from "react";

class ChatComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <h1>Try Chatting</h1>;
  }
}

export default ChatComponent;

I'm still getting the error "Uncaught TypeError: Cannot read property 'createElement' of undefined" from the App.js file at line 9 which is the "return" line. It will work if I change the ChatComponent to a function rather than a class, but react says in the documentation that it doesn't differentiate. I've also tried commenting-out/removing-all-together the constructor part of the class with no effect. I'm kind of at a loss why this is not working. Why won't it work as a class?

Fred Stark Fred Stark · Accepted Answer · 2018-07-19T01:53:57

In App.js you want to use this import line for React:

import React, { Component } from 'react';

The reason why is that jsx syntax gets compiled into React.createElement calls.

So the error Cannot read property 'createElement' of undefined tells you that React is undefined.

In the React package, React is the default export, so can't be imported in the curly braces

React and Meteor “Uncaught TypeError: Cannot read property 'createElement' of undefined”

1 Answers