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  lt div gt Hello  lt  div gt           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    lt script type  text javascript  src  react-0 13 2 js  gt  lt  script gt    Hope this saves someone else three days of precious life

User · Answer

I experienced this when missing an export statement for the JSX class   For example   class MyComponent extends React Component     export default MyComponent     lt - add me

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    gt               Exclude uglification for the  vendors  chunk         if  chunk name      vendors               return false                    return true                            More info

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In my case I was using   class Root extends React Component        THIS IS WORNG    After React Component     lt - WRONG       which was wrong but correct is   class Root extends React Component      THIS IS CORRECT    That - gt       after React Component was typo     also make sure there is  v React Component NOT    React component or React Components

User · Answer

I ve written  React component   instead of React Component That was my issue   and was looking for this more than half an hour

User · Answer

Here is one answer   import React    Component   from  react      NOT  react-dom

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In my case  it turned out React  lt 15 3 0 doesn t include React PureComponent  So code like   class MyClass extends React PureComponent                 wouldn t work

User · Answer

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

User · Answer

This worked for me   import React   Component  from  react

User · Answer

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

User · Answer

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

User · Answer

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                lt div gt                   lt Com2     things    gt                   lt Com3     things    gt               lt  div gt                         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

User · Answer

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

User · Answer

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

User · Answer

I experienced this error while importing component like    import React    Components   from  react     instead of   import React    Component   from  react

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I ve seen this error when you have a circular dependency   class A extends B    class B extends C    class C extends A

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I got this when I had a typo on my import   import  Comonent  from  react

User · Answer

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

User · Answer

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  amp  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               lt div gt                lt  div gt                     export default ExampleClass

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

Examples related to reactjs

Examples related to ecmascript-6