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>
    );
  }
}

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