Reactjs Giving Error Uncaught Typeerror: Super Expression Must Either Be Null or a Function, Not Undefined

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

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.

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

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

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

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.

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

For example:

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

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

Webpack 4 Chunks and Hashes with Uglification by TerserPlugin

This can occur when Webpack uses chunks and hashes with minification and unglification via TerserPlugin (currently on version 1.2.3). In my case the error was narrowed down to the uglification by the Terser Plugin of my vendors.[contenthash].js bundle which holds my node_modules. Everything worked when not using hashes.

Solution was to exclude the bundle in the uglification options:

optimization: {
  minimizer: [
    new TerserPlugin({
      chunkFilter: (chunk) => {
        // Exclude uglification for the `vendors` chunk
        if (chunk.name === 'vendors') {
          return false;
        }
        return true;
      },
    }),
  ],
}

More info

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

import {Comonent} from 'react';

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

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 {        
}

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'

This worked for me:

import React, {Component} from 'react';

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 

My conditions

• Create-React-App
• React-scripts v3.2
• Froala rich text editor v3.1
• Development mode worked fine
• The production build was broken with the error mentioned in the question