ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined

Question

I am using ReactJS.

When I run the code below the browser says:

Uncaught TypeError: Super expression must either be null or a function, not undefined

Any hints at all as to what is wrong would be appreciated.

First the line used to compile the code:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

And the code:

var React = require('react');

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

UPDATE: After burning in hellfire for three days on this problem I found that I was not using the latest version of react.

Install globally:

sudo npm install -g [email protected]

install locally:

npm install [email protected]

make sure the browser is using the right version too:

<script type="text/javascript" src="react-0.13.2.js"></script>

Hope this saves someone else three days of precious life.

Answer 1

Class Names

Firstly, if you're certain that you're extending from the correctly named class, e.g. React.Component, not React.component or React.createComponent, you may need to upgrade your React version. See answers below for more information on the classes to extend from.

Upgrade React

React has only supported ES6-style classes since version 0.13.0 (see their official blog post on the support introduction here.

Before that, when using:

class HelloMessage extends React.Component

you were attempting to use ES6 keywords (extends) to subclass from a class which wasn't defined using ES6 class. This was likely why you were running into strange behaviour with super definitions etc.

So, yes, TL;DR - update to React v0.13.x.

Circular Dependencies

This can also occur if you have circular import structure. One module importing another and the other way around. In this case you just need to refactor your code to avoid it. More info

Answer 2

This means that you want subclass something, which should be Class, but is undefined. The reasons might be:

• typo in Class extends ..., so you extending undefined variable
• typo in import ... from, so you import undefined from module
• referenced module does not contain the value, you want import (e.g. obsolete module - case with React), so you importing non existing value (undefined)
• typo in referenced module export ... statement, so it exports undefined variable
• referenced module missing export statement at all, so it exports just undefined

Answer 3

It can also be caused by a typo error, so instead of Component with capital C, you have component with lower c, for example:

React.component //wrong.
React.Component //correct.

Note: The source of this error is may be because there is React and we think automatically what comes next should be a react method or property starting with a lowercase letter, but in fact it is another Class(Component) which should start with a capital case letter.

Answer 4

In my case, with react-native, the error was that I had

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

instead of

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';

Answer 5

I've seen this error when you have a circular dependency.

class A extends B {}
class B extends C {}
class C extends A {}