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 react@0.13.2

install locally:

npm install react@0.13.2

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.

Answer 1

In my case the error was a silly one: I was missing the following line:

"use client"

at the beginning of the file

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

I have the same problem because 'react-moment'

Replace it with 'moment' library

Answer 7

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.

Answer 8

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

class HelloMessage extends React.Component

class HelloMessage extends React.component

Please check.

Answer 9

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!

Answer 10

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

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

Answer 11

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

Answer 12

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.

Answer 13

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
          }
        }
      }),
    )],
  }
}

Answer 14

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).

Answer 15

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.

Answer 16

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

Answer 17

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).

Answer 18

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

Answer 19

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

Answer 20

This worked for me:

import React, {Component} from 'react';

Answer 21

I experienced this error while importing component like:

import React, { Components } from 'react';

instead of

import React, { Component } from 'react';

Answer 22

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.

Answer 23

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.

Answer 24

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',
  },

Answer 25

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

Answer 26

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.

Answer 27

Here is one answer:

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

Answer 28

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

Answer 29

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

Answer 30

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.