Typeerror: super expression must either be null or a function, not undefined

Question

Problem :

I am using the reactjs.

When I run my code below my browser says:

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

Any clues at all as to what is wrong with my code?

First the line used to compile the code as below :

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

And below is my code:

var React = require('react');

class HelloMessage extends React.Component {

  render() {

    return <div>Hello World</div>;

  }

}

 

Answer 1

Solutions :

1. Correct Class Names :

If you are very certain that you are extending from a correctly named class,

Example : React.Component, not a React.component or React.createComponent, here you might need to upgrade the React version.

2. Upgrade React Version :

React has only supported the ES6-style classes since its version 0.13.0

While using below class:

class HelloMessage extends React.Component

You were trying to use the ES6 keywords (extends) to subclass from the class which was not defined using ES6 class. This was likely why you were running into the strange behaviour with your super definitions etc.

So, please update to React v0.13.x.

3.Circular Import Structure :

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

Answer 2

This means you want a subclass, which should be class but the class is undefined.

Reasons:

The reasons might be;

• Typo in class extends, so you can extend the undefined variable.
• Typo in import… from, so you can import undefined from the module.
• The referenced module does not contain the value, you want to import, so you are importing non-existence value.
• Typo in referenced module export statement, so it exports undefined variables.
• Referenced module missing export statement at all, so it exports just undefined

Solutions:

Class Names:

Firstly, if you are sure that you are extending from correctly named class, like React.Component, not React.component or React.createComponent, so you have to upgrade your React version.

Upgrade React:

React only supports ES6-style classes since version 0.13.0. Before that when using;

class HelloMessage extends React.Component

You are attempting to use ES6 keywords “extends” to subclass from a class that was not defined using ES6 class. This was likely why you were running into storage behavior with super definition etc. So, update to React v0.13.x.

Circular Dependencies:

This can occur if you have a 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.