Fixing React error: Uncaught TypeError: MyMixin is not a function(anonymous function)

When upgrading React, you may be tempted to have your ES6 classes extend Mixin objects (to avoid upgrading these)

For example:

var MyMixin = {
  componentShouldUpdate: function() {
    // some logic
  }
}

class MyComponent extends MyMixin {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})

You will get a very cryptic error like so:

Uncaught TypeError: MyMixin is not a function(anonymous function)

This is because “objects” are actually a function (a constructor) with the information for how to construct the object in fn._prototype.

To fix the above error, you can either convert MyMixin to a real class, or make a base class that you can extend that contains the mixins, like so:

class MyComponent extends React.createClass({
  mixins: [MyMixin],
  render: () => {}
}) {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})