ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
ReactjsEcmascript 6Reactjs Problem Overview
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.
Reactjs Solutions
Solution 1 - Reactjs
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][1].
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
[1]: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html "React v0.13.0 Beta 1 React Blog"
Solution 2 - Reactjs
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 importundefined
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 justundefined
Solution 3 - Reactjs
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.
Solution 4 - Reactjs
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';
Solution 5 - Reactjs
I've seen this error when you have a circular dependency.
class A extends B {}
class B extends C {}
class C extends A {}
Solution 6 - Reactjs
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.
Solution 7 - Reactjs
I experienced this when missing an export statement for the JSX class.
For example:
class MyComponent extends React.Component {
}
export default MyComponent // <- add me
Solution 8 - Reactjs
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
Solution 9 - Reactjs
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;
},
}),
],
}
Solution 10 - Reactjs
I got this when I had a typo on my import:
import {Comonent} from 'react';
Solution 11 - Reactjs
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!!
Solution 12 - Reactjs
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 {
}
Solution 13 - Reactjs
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'
Solution 14 - Reactjs
This worked for me:
import React, {Component} from 'react';
Solution 15 - Reactjs
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
Solution 16 - Reactjs
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.
Solution 17 - Reactjs
I`ve written
React.component
instead of React.Component
That was my issue))
and was looking for this more than half an hour.
Solution 18 - Reactjs
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
Solution 19 - Reactjs
I experienced this error while importing component like:
import React, { Components } from 'react';
instead of
import React, { Component } from 'react';
Solution 20 - Reactjs
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.
Solution 21 - Reactjs
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).
Solution 22 - Reactjs
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() {}
Solution 23 - Reactjs
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
Solution 24 - Reactjs
Here is one answer:
import React, { Component } from 'react'; // NOT 'react-dom'
Solution 25 - Reactjs
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.
Solution 26 - Reactjs
Look if you have a typo error in your importation or your class generation, it could be simply that.
Solution 27 - Reactjs
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
}
}
}),
)],
}
}
Solution 28 - Reactjs
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.
Solution 29 - Reactjs
This can also happen if you had used require
instead of import
within your code.
Solution 30 - Reactjs
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';
Solution 31 - Reactjs
In my case it was React.Element change to React.Component that make fix for this error.
Solution 32 - Reactjs
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....
Solution 33 - Reactjs
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',
},
Solution 34 - Reactjs
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
.
Solution 35 - Reactjs
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.
Solution 36 - Reactjs
For me I forgot default
. So I wrote export class MyComponent
instead of export default class MyComponent
Solution 37 - Reactjs
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).
Solution 38 - Reactjs
I got this when I tried to use react-i18next
's Translation
on the parent class and the child. It was being translated twice!
Solution 39 - Reactjs
Initially i was trying import React, {Components} from 'react';
i didn't noticed that we have to extend only {Component}
Solution 40 - Reactjs
There could be a spelling/case mistake in component name: For example:
class HelloMessage extends React.Component
class HelloMessage extends React.component
Please check.
Solution 41 - Reactjs
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.
Solution 42 - Reactjs
I have the same problem because 'react-moment'
Replace it with 'moment' library
Solution 43 - Reactjs
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() {
}
}
Solution 44 - Reactjs
The problem, as it seems, appears to be React.Components instead of React.Component.
Also, did you write the ReactDOM.render(
Hope you had your problem solved. Cheers!