Let’s say you convert an old React object-class to an ES6 object, resulting in the following code:
class MyComponent extends React.Component {
render() {
return Hello!;
}
}
React.createClass(MyComponent);
This can give you an error:
react-with-addons.js:20261 Uncaught Error: Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object.
The correct answer is to use “MyComponent” directly, like so:
return
You may also encounter this issue if you attempt to import a named export from a module instead of a default export.
Default Export should be imported as follows:
import React from ‘react’;
Named Export should be imported as follows:
import { History } from ‘react-router’;
If you instead import a named export as follows:
import History from ‘react-router’;
you will see the following error message in your browser console:
invariant.js:39 Uncaught Error: Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a regular object.