CODEWITHSUNDEEP
javascriptreactjs
Parishilan Rayamajhi
Parishilan Rayamajhi

Reputation: 3049

Uncaught TypeError: Super expression must either be null or a function, not undefined error in react app

package.json looks like

{
  "name": "react_playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

The error looks like

bundle.js:20087 Uncaught TypeError: Super expression must either be
null or a function, not undefined
at _inherits (bundle.js:20087)
at bundle.js:20090
at Object. (bundle.js:20115)
at webpack_require (bundle.js:677)
at fn (bundle.js:88)
at Object. (bundle.js:14155)
at webpack_require (bundle.js:677)
at module.exports (bundle.js:723)
at bundle.js:726

This is my index.html

 <!DOCTYPE html>
    <html>
        <head>
              <title>React</title>
        </head>

        <body>
      <div id="xyz"></div>
          <script src = "/app/bundle.js"></script>

        </body>
    </html>

And this is my index.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDom.render(<App />,document.getElementById('xyz'));

Upvotes: 0

Views: 2004

Answers (1)

Dan Mason
Dan Mason

Reputation: 2327

It was because you had React.component instead of React.Component with an uppercase C (@ShubhamKhatri).

Also ReactDom should match the case in your import, so it should be ReactDOM (@AndreaFalzetti).

Here is your issue reproduced:

class App extends React.component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDOM.render(<App />,document.getElementById('xyz'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="xyz"></div>

Here is your issue fixed:

class App extends React.Component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDOM.render(<App />,document.getElementById('xyz'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="xyz"></div>

Upvotes: 2

Related Questions