CODEWITHSUNDEEP
reactjswebpack
Menelith
Menelith

Reputation: 551

React.js Uncaught Error: Invariant Violation

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.

Upvotes: 9

Views: 26924

Answers (3)

John Ruddell
John Ruddell

Reputation: 25862

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>;
}

Upvotes: 6

SlimPDX
SlimPDX

Reputation: 803

I know this is an older question but I just ran into this issue when trying to use the react-bootstrap component library.

I was attempting to import DropdownButton from 'react-bootstrap' using the new import syntax import DropdownButton from 'react-bootstrap' and the problem was that I needed curly braces around DropdownButton like so: import { DropdownButton } from 'react-bootstrap'

Upvotes: 3

Menelith
Menelith

Reputation: 551

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.

Upvotes: 8

Related Questions