310

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.

11
  • 112
    As of 0.14.8, you can still get this if you do something like extends React.component (lowercase c). Jun 7, 2016 at 21:45
  • 14
    @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
    – P-RAD
    Aug 14, 2016 at 14:02
  • 2
    I did React.Components (plural), the right is React.Component (singular) Ow good... how did i miss that...
    – Ismael
    Jun 7, 2017 at 13:06
  • 1
    This can also happen if you have recursive imports. i.e ComponentA requires ComponentB and ComponentB requires ComponentA.
    – Snowman
    Oct 3, 2017 at 18:21
  • 5
    @Kevin Suttle You comment is actually more useful than the answer
    – Mick Jones
    May 2, 2018 at 15:21

47 Answers 47

1
2
1

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

0

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.

2
  • 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.
    – dmarr
    Aug 30, 2016 at 22:44
  • FWIW, removing react from the browserify-shim config and letting browserify reconcile the dependency normally still results in the OP's issue.
    – dmarr
    Aug 30, 2016 at 22:46
0

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

0

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

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

0

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

0

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

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.

0

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.

0

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

0

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

0

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

0

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

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

0

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.

0

I have the same problem because 'react-moment'

Replace it with 'moment' library

0

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

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!

1
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.