React Errors : Super expression must either be null or a function

 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.

Error :-

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

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.

Lets look at the culprits (that I have come across so far) that cause this error in detail.

1. Forgotten export

The first culprit is usually that you have forgotten to export the component that you are trying to use and hence React finds that the Component you are trying to extend from is undefined . This is an easy to find and fix issue.

2. Using a default export incorrectly

If a component is exported with the default keyword then it must be imported as a default import and not as a named import.

For example if your export statement is export default Foo, then the correct way to import this component is import Foo from "./Foo" and not import { Foo } from "./Foo" . The latter import statement is for named exports.

3. Circular Dependencies

This is a an often missed culprit which I came across recently in one of the projects I was working on. After going into the depths of the google search rabbit hole, I finally came across a stack overflow answer that shed some light on why I was still getting the error in-spite of the component being exported / imported correctly.

If you have dependencies of a cyclic nature like shown below, it will result in this error:

class A extends B {}

class B extends C {}

class C extends A {}

This is all about reactjs giving error Uncaught TypeError: Super expression must either be null or a function, not undefined.

Reference :-

https://stackoverflow.com/questions/30116430/reactjs-giving-error-uncaught-typeerror-super-expression-must-either-be-null-or