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

Question

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.

Barboza

As of 0.14.8, you can still get this if you do something like extends React.component (lowercase c). – Kinesics

@Kevin just want to rephrase , basically If you have a typo there somewhere , in my case it was Components instead of Component :). Your comment helped BTW – Foolhardy

My issue was I wasn't exporting the class at the end of the file ... – Insinuate

I did React.Components (plural), the right is React.Component (singular) Ow good... how did i miss that... – Bellebelleek

Similar error may also happen when somebody writes import Relay, { Mutation } from 'react-relay'; instead of intended import Relay, { Mutation } from 'react-relay/classic'; – Lesleylesli

This can also happen if you have recursive imports. i.e ComponentA requires ComponentB and ComponentB requires ComponentA. – Canary

I got this error from accidentally including empty parentheses (as in a parameter-less function declaration): export default class SideNav extends React.Component() {...} Corrected to the following and all was fine: export default class SideNav extends React.Component {...} – Martensite

Another problem is that I was referencing a class that I had after the position. Moving the extending class AFTER the class I was trying to extend fixed the issue. – Shamikashamma

@Kevin Suttle You comment is actually more useful than the answer – Madiemadigan

In my case, this error only occurs in the server (showing just a plain page) not in local. local there is no issue for me. – Oidea

not applicable in the case but if you have an index.js and it defines B then A as exports but B extends A, then this will also throw this error as B is created before A is available either reference the actual file or ensure your index is in the order of requirements – Scrotum

Answer 1

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

Pamalapamela

For everyone else that has this issue but updating React is not the fix - scroll further down to the other answers, it might be a simple typo. In my case it was a class-definition using React.component instead of React.Component – Ecotone

FYI, old way class can be extended also with extends. Try this var x = function(){}; class y extends x {} – Deduce

An extraordinarily annoying and non-descriptive error. Mine too was entirely down to a typo - Componment instead of Component. Moral is check your typing very, very carefully! – Straightout

It was a circular import structure for me. Thanks for saving me a lot of hours of debugging! – Barrow

Just FYI. I recently got the same error despite being on ReactJS 16.x. Turns out I had a typo in this line: class App extends React.Component () {...} - which should be corrected to class App extends React.Component {...} (without the () at the end) – Consonantal

Capital 'C' Component! #facepalm – Burnedout

It's amazing that I end up many times in my life on this answer without remembering that I should have check the C – Transmontane

First line was the answer. – Mccrary

It was a circular dependency for me. – Gus

I was getting the same error when I try React.Components instead of React.Component, and this answer helped me. – Sunflower

In my case changing Component to React.Component worked. I'm using react native. Why I have to change it to React.Component? I'm including import React from "react"; – Lighter

Answer 2

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

Endocarditis

In my case it was a lowercase of Component in React.Component. – Gametophyte

In my case it was a self written class not correctly imported. I was importing the default exported class via import {Foo} from 'bar' instead of import Foo from 'bar'. Upvoted therefore. – Cataplexy

Don't do this either: class Thing extends React.Component() { -- I had to remove the () – Stilt

In my case this error was caused by accidentally creating a circular reference by what I was importing(the class I wanted to extend to the subclass) in my components render function. When I tried to execute/render the subclass since the superClass wasnt created yet it was undefined. – Natatorium

^ Caused by a circular reference for me as well. – Hebrides

In my case, I updated a dependency from which I was extending a module, and the module name had changed. Been using React since 0.11 and they still need to work on their error messages, grumble grumble... – Mutate

class Widget extends React.Compoment { Took me far too long to figure out lol – Cookson

This is an important error that signals that you're not using a JavaScript linter. In case of a faulty import or extend the linter notifies you in IDE. – Permanency

In my case... it was because I was trying to import React, { Component } from 'react-native' rather than 'react' :D whoops. – Synoptic

I was extending React and not Component. It's always something dumb, isn't it? – Gwenny

Answer 3

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.

Jacobinism

huh, strangely this error isn't caught during the webpack build step, but it will show up at run time. – Rozanna

Answer 4

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

Oraorabel

This worked in my case! The documentation provided in react-native site has this buggy example :) – Followthrough

Answer 5

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

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

Benedix

I was trying to extend an imported class and then re-export that extension as the original name of the original import. So that was probably it? – Disparity

Answer 6

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.

Machinegun

THIS was the issue for me. very silly. thanks a lot! – Marga

Answer 7

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

For example:

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

Flocculus

Answer 8

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

Nereus

Answer 9

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

Stiffler

This indeed solved the problem for me, however I was able to pin point the culprit and so at the end I was able to apply the uglification. See my answer - react-dazzle. – Choosy

I narrowed down to terser plugin, ultimately changing react-script to version 3.2.0 fixed the issue for me. – Pathfinder

Answer 10

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

Rollick

This helped me figure out what I did wrong. Accidentally wrapped the component name in { } in my import statement. Subtle difference. Can be hard to spot that mistake. – Paschal

Answer 11

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

import {Comonent} from 'react';

Shemeka

I also got this with extends React.Components instead of React.Component (no s). – Sharolynsharon

I also got this but for typing small first letter of a component - ... extends React.component {} – Fighter

Answer 12

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

Gastight

In my case I was using React.component instead of React.Component (notice the capital "C" I was missing) – Ignazio

Answer 13

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'

Throughput

basically it should match like this: export Foo ... import { Foo } - or - export default Foo ... import Foo – Boleslaw

Answer 14

This worked for me:

import React, {Component} from 'react';

Samoyed

Answer 15

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

Solution to my problem

Downgrade Froala to v3.0.

Something in v3.1 broke our Create React App build process.

Update: Use react scripts v3.3

We discovered that there was an issue between React Scripts 3.2 and Froala 3.1.

Updating to React Scripts v3.3 allowed us to upgrade to Froala 3.1.

Robertaroberto

I love you. I want to come to find you and kiss your feet !!!!!!!!!!!!!!!!!!!!!!!!! (Nightmare all-nighter over) – Lachrymal

I'm not using create react app, but facing the same issue on prod with froala 3.1. Can you explain what was the issue here? – Defoe

There's a project I have with the same issue only in production. This only happened after updating an internal library. No create-react-app and no froala. Curious what causes this issue to only occur in production. Do you know what was different? – Kampong

I can't answer any of your questions. All I know is that under the conditions I had, doing what I said in my answer solved the problem for me. – Robertaroberto

Answer 16

I had a similar issue with Next.js 13 and tried all the solutions above but none worked for me. I had to change the component to a client component before the error disappeared.

Vitek

Answer 17

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 

Deviled

Answer 18

I`ve written

React.component

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

Tamtama

Answer 19

In my case I was using:

class Root extends React.Component() {
// THIS IS WORNG
// After React.Component () <- WRONG!!
}

which was wrong but correct is:

class Root extends React.Component {
// THIS IS CORRECT
// That -> '()' after React.Component was typo
}

also make sure there is
√ React.Component
NOT
ˣ React.component or React.Components

Clitoris

Welcome to SO. It seems clear the OP didn't commit this mistake as they have included the correct form already in the question. Were you getting the same error as OP but with a different cause? – Jackpot

Yes I was getting the same error as OP but I found that the cause was different and hope this will help others. – Clitoris

Answer 20

I experienced this error while importing component like:

import React, { Components } from 'react';

instead of

import React, { Component } from 'react';

Seeker

Answer 21

There might be a third party package causing this. In our case it was react-dazzle. We have similar settings to that of @steine (see this answer above).

In order to find the problematic package I ran the webpack build locally with production mode and thus was able to find the problematic package in the stack trace. So for us this provided the solution and I was able to keep the uglification.

Choosy

Answer 22

Change import React from 'react-dom to import React, {Component} from 'react'
And change class Classname extends React.Component to class Classname extends Component
If you are using the latest version of React(16.8.6 as of now).

Slogan

Answer 23

just add "use client" and it works for me, btw i use nextjs

Hodgson

Answer 24

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

Nolita

Answer 25

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

Vale

Answer 26

Here is one answer:

import React, { Component } from 'react'; // NOT 'react-dom'

Zicarelli

exactly my typo – Lenee

Answer 27

In my case, I fixed this error by change export default class yourComponent extends React.Component() {} to export default class yourComponent extends React.Component {}. Yes delete the parenthesis () fixed the error.

Lavonia

Answer 28

Look if you have a typo error in your importation or your class generation, it could be simply that.

Internship

Answer 29

I've seen this error occur due to 'comments' in the bundle generated by webpack. Using 'pathinfo'= true in webpack.config.js can cause this issue:

webpack.config.js

module.exports = {
  output: {
    pathinfo: true,
  }
}

'pathinfo' defaults to true in development and false in production mode. https://webpack.js.org/configuration/output/#outputpathinfo Try setting this value to false to resolve the issue.

This can also happen if you are not using a plugin to strip the comments from the build output. Try using UglifyJs (https://www.npmjs.com/package/uglifyjs-webpack-plugin/v/1.3.0):

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyJsPlugin(
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false
          }
        }
      }),
    )],
  }
}

Forborne

Answer 30

There could be a spelling/case mistake in component name: For example:

class HelloMessage extends React.Component

class HelloMessage extends React.component

Please check.

Christenson

Answer 31

I am getting this error in a TypeScript project, which means all the spelling problems or trying to call a class constructor etc. mentioned in other answers would be caught at compile time already.

The fix I had for this problem was to not re-export the child component. The erroneous relationship I had was like

// src/Parent.tsx
Class Parent extends React.Component { }

// src/child/Child.tsx
export default class Child extends Parent { }

// src/child/index.ts
export { default as Child } from './Child';

// src/Caller.tsx
import {Child} from './child';

function Caller() {
  return <Child />  
}

It then works fine after I remove the re-export:

// src/Parent.tsx
Class Parent extends React.Component { }

// src/child/Child.tsx
export default class Child extends Parent { }

// src/Caller.tsx
import Child from './child/Child';

function Caller() {
  return <Child />  
}

An

This should certainly earn you the necromancer badge. – Barboza

Answer 32

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.

Childbed

How do you avoid Uncaught Error: Cannot find module 'react' after removing the browserify-shim config? Basically I want to keep react as an external dependency but browserify seems to not understand how to build the bundle and keep React external. This may or may not be because the module I am including in my browserify entry point has react as a dependency. – Carrillo

FWIW, removing react from the browserify-shim config and letting browserify reconcile the dependency normally still results in the OP's issue. – Carrillo

Answer 33

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

Buchmanism

Answer 34

For those using react-native:

import React, {
  Component,
  StyleSheet,
} from 'react-native';

may produce this error.

Whereas referencing react directly is the more stable way to go:

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';

Quizmaster

Answer 35

In my case it was React.Element change to React.Component that make fix for this error.

Spiroid

Answer 36

Another occurrence with Expo/react-native with typescript : sometimes when you are recompiling the typescript files in the middle of a packaging, the react packager is lost.

The only way to make my app run again is to clear the cache; if you are using the expo cli, you can press press R (that is an UPPERCASE 'R'); this will rebuild the whole bundle. Sometimes switching to development mode also helps....

Doukhobor

Answer 37

In my case, I was using a npm module with peer dependencies. The error was caused by the wrong 'external' config in he module's webpack config:

  externals: {
    react: 'react',
    react: 'prop-types',
  },

It should be:

externals: {
    react: 'react',
    ['prop-types']: 'prop-types',
  },

Etam

Answer 38

I had this problem because my react and react-dom versions were not matching after a merge.

I fixed it by manually entering the version number I wanted and re-running npm install.

Arnone

Answer 39

In my case, it turned out React <15.3.0 doesn't include React.PureComponent. So code like:

class MyClass extends React.PureComponent {
    //...
}

wouldn't work.

Enticement

Answer 40

For me I forgot default. So I wrote export class MyComponent instead of export default class MyComponent

Finegrained

Answer 41

If you are running a dev watch mode stop out and rebuild. I converted an ES6 module to a React Component and it only worked after a rebuild (vs a watch build).

Ensor

Answer 42

I got this when I tried to use react-i18next's Translation on the parent class and the child. It was being translated twice!

Elyssa

Answer 43

Initially i was trying import React, {Components} from 'react';

i didn't noticed that we have to extend only {Component}

Joab

Answer 44

In my case problem was because of importing child class into parent:

in child file:

class Child extends Parent {
   constructor();
}

in parent file:

import Child from 'my_path';

class Parent {
   constructor();
}

Problem was solved After Ive deleted child import.

Furcate

Answer 45

I have the same problem because 'react-moment'

Replace it with 'moment' library

Forehead

Answer 46

In our case, we were trying to extend a parent class which only had static functions. I.e.

Parent {
  static something() {
  }
}

Child extends Parent {
}

Adding a constructor to the Parent solved the issue.

Parent {
  constructor() {}

  static something() {
  }
}

Ediva

Answer 47

The problem, as it seems, appears to be React.Components instead of React.Component.

Also, did you write the ReactDOM.render(, YourNode) here?

Hope you had your problem solved. Cheers!

Leanora