React.js Uncaught Error: Invariant Violation

Question

After getting frustrating from the react_rails gem because of the lack of support for Commonjs modules, i'm testing the react_webpack_rails gem from netguru. but since then i got an Invariant Violation.

For example, if i'm writing a simple Hello World component in ES6 syntax :

import React from 'react';

class tasksBox extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

export default tasksBox;

raise these errors :

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

your help will be much appreciated, i can't figure where the error come from.

Answer 1

Well, the answer was very simple, needed to put the first letter of the classname in capital letter. and everything went well.

import React from 'react';

class TasksBox extends React.Component {
  render() {
    return <div>blabla</div>;
  }
}

export default TasksBox;

thanks for your help guys.

Answer 2

The name of your react component is invalid. It must be capitalized like so:

export class TasksBox extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

You can export the class inline. Notice I changed the name to start with a capital letter TasksBox instead of tasksBox as React wants your class name to start with a capital letter

---

EDIT: if your example has no state or other custom defined functions you dont need this to be a React Class.. but rather it can be a Stateless Function/Component like so

export default (props) => {
    return <div>Hello World</div>;
}