I'moving to React ES6 as the recommended way to write React classes. I'm starting from a simple example:
import React from 'react';
import ReactDOM from 'react-dom';
require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');
require('jquery');
require('bootstrap');
import Dashboard from './components/Dashboard/Dashboard';
ReactDOM.render(
<Dashboard/>,
document.getElementById('react-container')
);
And my component in ES6:
import React from 'react';
class Dashboard extends React.Component {
render() {
return <h1>Hello, Don Trump</h1>
}
}
I'm getting the following error on Chrome 55:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
at invariant (VM1093 bundle.js:9069)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166)
at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589)
at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480)
at Object.mountComponent (VM1093 bundle.js:16018)
at mountComponentIntoNode (VM1093 bundle.js:28717)
at ReactReconcileTransaction.perform (VM1093 bundle.js:17017)
at batchedMountComponentIntoNode (VM1093 bundle.js:28739)
at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017)
at Object.batchedUpdates (VM1093 bundle.js:26233)
I thinks there is something simple I'm missing. Help appreacited.
The error message might have it right:
You likely forgot to export your component from the file it's defined in.
Export your Dashboard component like the following:
import React from 'react';
class Dashboard extends React.Component {
render() {
return <h1>Hello</h1>
}
}
export default Dashboard;
Add
export default Dashboard
At the end of your component; So the new code will be
class Dashboard extends React.Component { render() { return <h1>Hello, Don Trump</h1> } } export default Dashboard;
You need to export the class. You can actually export and declare at the same time
import React from 'react';
export default class Dashboard extends React.Component {
render() {
return <h1>Hello</h1>
}
}