CODEWITHSUNDEEP
javascriptreactjsmeteor
Judson Neff
Judson Neff

Reputation: 13

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

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

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?

Upvotes: 1

Views: 2224

Answers (1)

coagmano
coagmano

Reputation: 5671

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

Upvotes: 2

Related Questions