Fixing React error: Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a regular object.

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 

One Reply to “Fixing React error: Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a regular object.”

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *