React.js Uncaught Fehler: Invariant Violation

Question

Nachdem ich wegen der fehlenden Unterstützung für Commonjs-Module frustriert vom react_rails-Juwel war, teste ich das react_webpack_rails Juwel von Netguru. aber seit dem habe ich eine Invariant Violation bekommen.

Zum Beispiel, wenn ich eine einfache Hallo Welt Komponente in ES6 Syntax zu schreiben:

import React from 'react'; 

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

export default tasksBox; 

erhöhen diese Fehler:

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. 

Ihre Hilfe wird sehr geschätzt werden, kann ich nicht Zahl, woher der Fehler kommt.

Answer 1

Der Name Ihrer Reaktionskomponente ist ungültig. Es muss wie folgt groß geschrieben werden:

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

Sie können die Klasse inline exportieren. Bemerke ich den Namen geändert mit einem Großbuchstaben zu beginnen TasksBox statt tasksBox als Reaktion will Ihre Klassennamen mit einem Großbuchstaben

---

EDIT zu starten: Wenn Ihr Beispiel keine staatlichen oder anderen benutzerdefinierten definierten Funktionen, die Sie nicht brauchen, dies eine Reaktion Klasse sein .. sondern kann eine Stateless Funktion/Komponente wie so

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

Answer 2

Gut sein, war die Antwort sehr einfach, benötigt, um die ersten Buchstaben des Klassennamen in Großbuchstaben zu setzen. und alles lief gut.

import React from 'react'; 

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

export default TasksBox; 

danke für Ihre Hilfe Jungs.

Answer 3

Ich weiß, dass dies eine ältere Frage ist, aber ich bin gerade auf dieses Problem gestoßen, als ich versuchte, die react-bootstrap Komponentenbibliothek zu verwenden.

ich versuche, Dropdownbutton von ‚reagieren-Bootstrap‘ mit der neuen Import-Syntax import DropdownButton from 'react-bootstrap' und das Problem zu importieren war, dass ich geschweiften Klammern um Dropdownbutton wie so benötigt: import { DropdownButton } from 'react-bootstrap' es