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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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.

Answers:

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

Questions:
Answers:

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
Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

I experienced this when missing an export statement for the JSX class.

For example:

class MyComponent extends React.Component {
}
export default MyComponent // <- add me

Questions:
Answers:

For any other persons, that may develop this issue. You could also check that the component method in React.Component is capitalized. I had that same issue and what caused it was that I wrote:

class Main extends React.component {
  //class definition
}

I changed it to

class Main extends React.Component {
  //class definition
}

and everything worked well

Questions:
Answers:

You can also receive this if you are attempting to execute React.Component with an erroneous () in your class definition.

export default class MyComponent extends React.Component() {}
                                                        ^^ REMOVE

Which I sometimes manage to do when I’m converting from a stateless functional component to a class.

Questions:
Answers:

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

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

Questions:
Answers:

I got this when I had a typo on my import:

import {Comonent} from 'react';

Questions:
Answers:

Check for the Classes you extend actually exists, few React methods are depreciated, It also might be a Typo error 'React.Components' instead of 'React.Component'

Good Luck!!

Questions:
Answers:

I have same issue, just change from Navigator to {Navigator}

import Navigator from 'react-native-deprecated-custom-components'
// to
import {Navigator} from 'react-native-deprecated-custom-components'

Questions:
Answers:

I am going to contribute another possible solution, one that worked for me. I was using the convenience index to collection all components into one file.

I don’t believe at the time of writing this is officially supported by babel, and throws typescript into a spin – however I’ve seen it used in many projects and is definitely convenient.

However, when used in combination with inheritance it seems to throw the error presented in the question above.

A simple solution is, for modules that act as parents need to be imported directly instead of via a convenience index file.

./src/components/index.js

export Com1 from './com-1/Com1';
export Com2 from './com-2/Com2';
export Com3 from './com-3/Com3';
export Parent1 from './parent/Parent1';

./src/components/com-1/Com1.js

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

./src/components/com-3/Com3.js

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

./src/components/com-3/Com3.js

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

Questions:
Answers:

My issue was I wasn’t exporting the class at the end of the file …

Questions:
Answers:

I`ve written

React.component

instead of React.Component
That was my issue))
and was looking for this more than half an hour.

Questions:
Answers:

Using Babel (5.8) I get the same error if I try to use the expression export default in combination with some other export:

export const foo = "foo"
export const bar = "bar"
export default function baz() {}

Questions:
Answers:

If you are receiving this error and are using Browserify and browserify-shim (like in a Grunt task), you might have experienced a dumb moment like I did where you unintentionally told browserify-shim to treat React as already part of the global namespace (for example, loaded from a CDN).

If you want Browserify to include React as part of the transform, and not a separate file, make sure the line "react": "global:React" does not appear in the "browserify-shim" section in your packages.json file.

Questions:
Answers:

This can also happen if you had used require instead of import within your code.

Questions:
Answers:

Happened to me too when I used this :

class App extends React.Component(){

}

Instead of the right one :

class App extends React.Component{

}

Notice:- () in the first one which is the main cause of this problem

Questions:
Answers:

This can also happen if you have recursive imports.

i.e ComponentA requires ComponentB and ComponentB requires ComponentA.

Questions:
Answers:

Not correct for this answer but for others with same error my ridiculously silly mistake could potentially help.

Stupidly,my issue was using function notation by including () following the class name.

Make sure your syntax is correct. And you’ve imported & exported any external components/modules with the correct names and paths.

This template should work fine if you have a newish version of react installed:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Questions:
Answers:

in my case I write

class Name extends React.Compoment //instead of class Name extends React.Component

Leave a Reply

Your email address will not be published. Required fields are marked *