Uncaught TypeError: Super expression must either be null or a function, not undefined in _prelude.js:1 SOLVED: component must be Component

app.js

import React from 'react';
import { LeftDropZone } from './leftDropZone';
import { RightDropZone } from './rightDropZone';

export class ScholarshipsApp extends React.component {
  render() {
    return (
      <section id="drop-zones">
        <h1>Scholarships Admin</h1>
        <LeftDropZone />
        <RightDropZone />
      </section>
    );
  }
}

chrome error console

_prelude.js:1 Uncaught TypeError: Super expression must either be null or a function, not undefined_prelude.js:1 _inheritsHelloComponent.js:3 (anonymous function)HelloComponent.js:3 /Users/ivan/dev/scholarships/app/js/components/HelloComponent.js.react_prelude.js:1 s_prelude.js:1 e_prelude.js:1 (anonymous function)

leftDropZone.js

import React from 'react';

export class LeftDropZone extends React.component {
  render() {
    return (
      <section id="left-drop-zone">
        <p>Left Drop Zone</p>
      </section>
    );
  }
}

main.js

import babelifyPolyfill from 'babelify/polyfill';
import React from 'react';
import { ScholarshipsApp } from './components/app';

React.render(
  <ScholarshipsApp />,
  document.getElementById('app-container')
);

package.json

{
  "name": "Scholarships",
  "version": "0.0.1",
  "description": "A Scholarships management web application based on needs at UW Foster School of Business. Ideally it will useful for other departments and universities.",
  "main": "server.js",
  "scripts": {
    "test": "grunt test"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/UWFosterIT/scholarships"
  },
  "keywords": [
    "scholarships",
    "foster",
    "uw",
    "university-of-washington"
  ],
  "author": "Ivan Storck",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/UWFosterIT/scholarships/issues"
  },
  "homepage": "https://github.com/UWFosterI/scholarships",
  "dependencies": {
    "compression": "^1.4.1",
    "express": "^4.12.0",
    "express-redirect": "^1.1.1",
    "lodash": "^3.3.1",
    "react": "^0.13.0-rc1"
  },
  "devDependencies": {
    "babelify": "ivanoats/babelify",
    "blanket": "^1.1.6",
    "chai": "^2.1.0",
    "esprima-fb": "^12001.1.0-dev-harmony-fb",
    "grunt": "^0.4.5",
    "grunt-browserify": "^3.4.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "^0.8.0",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-eslint": "^7.0.1",
    "grunt-express-server": "^0.4.19",
    "grunt-jscs": "^1.5.0",
    "grunt-karma": "^0.10.1",
    "grunt-mocha-cov": "^0.3.0",
    "grunt-notify": "^0.4.1",
    "grunt-open": "^0.2.3",
    "grunt-simple-mocha": "^0.4.0",
    "grunt-watchify": "^0.1.0",
    "grunt-webdriver": "^0.4.8",
    "jit-grunt": "^0.9.1",
    "jsxhint": "^0.12.0",
    "karma": "^0.12.23",
    "karma-browserify": "^3.0.3",
    "karma-chrome-launcher": "^0.1.4",
    "karma-ie-launcher": "^0.1.5",
    "karma-jasmine": "^0.3.1",
    "karma-mocha": "^0.1.10",
    "karma-phantomjs-launcher": "^0.1.4",
    "mocha": "^2.1.0",
    "reactify": "^1.0.0",
    "supertest": "^0.15.0",
    "time-grunt": "^1.1.0"
  },
  "config": {
    "blanket": {
      "pattern": "server.js"
    }
  }
}

rightDropZone.js

import React from 'react';

export class RightDropZone extends React.component {
  render() {
    return (
      <section id="right-drop-zone">
        <p>Right Drop Zone</p>
      </section>
    );
  }
}

Thanks!

You are the man!

Thank you

thanks! had the same issue because of typo. Capitalized Component and that fixed it.

Thank you!

Same issue here, thanks!

Thanks!

thanks, same error. some kind of typo occur this error

Kudos!

Thanks!

Thanks! This worked perfectly

Thanks!

same here, thank you...typo to 'Components'.... : )

Thank!

Thanks!

Thanks!

Thanks :) It took me a lot of searching to realise that React.component should have been React.Component facepalm

solution example:

export default class HelloWorld extends React.Component {

Thanks!

Hi I see that you use React, so I am sure that you will find interesting the https://reactjs.co - this is the free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.

thaaanks

Thanks a lot!

Thanks a lot!!!!

Thanks!!

Same Issue occurred in React-native code. can you please help me how to resolve it in React-Native?
@ivanoats