• Register
0 votes
79 views

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>;

  }

}

 

7 5 2
3,870 points

2 Answers

0 votes

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.

9 7 4
38,600 points
0 votes

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.

 

11 5 1
3,890 points

Related questions

0 votes
1 answer 841 views
841 views
Problem : I am using the reactjs. When I try to run my code the browser says as below: Uncaught TypeError: Super expression must either be null or a function, not undefined The line used to compile my code: browserify -t reactify -t babelify examples/temp.jsx -o examples/public ... Component { render() { return <div>Hello World !! </div>; } } Does anyone have any idea on the solution for my issue?
asked Dec 7, 2019 alecxe 7.5k points
0 votes
1 answer 122 views
122 views
Problem: I have recently started learning about React, Babel, JSX and JS. Now I am receiving an error from a babel if I tried to compile my JSX code into a JS code. Please find the error: &ldquo;Jsx value should be either an expression or a quoted jsx text.&rdquo ... out in my searching on interenet that prop values should be passed only between {}, but adding these to my code did not help me.
asked Aug 13 Raphael Pacheco 4.9k points
0 votes
2 answers 1.3K views
1.3K views
Problem : I am very new to React and so facing this error expected an assignment or function call and instead saw an expression no-unused-expressions
asked Nov 18, 2019 peterlaw 6.9k points