React-router error: super expression must either be null or a function

Question

I am new to react-router (https://github.com/rackt/react-router). I included it after react like this:

<script src="http://fb.me/react-0.12.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactrouter/0.13.2/ReactRouter.js"></script>

I got an error: Uncaught TypeError: Super expression must either be null or a function, not undefined

What did I do wrong?

Answer 1

Though this has been resolved, I am posting a solution since I had a similar problem. Hopefully it will be helpful to someone else.

I wasn't using React Router. I was using React with Webpack, with Babel as loader. I was getting the same error as stated by JustWonder.

I was using ES6 classes. Turns out, I had typed

class App extends React.component {...}

Changing React.component to React.Component (upper-case 'C') solved the problem for me.

Answer 2

I sloved the issue by upgrading react version to 0.13.3

npm install [email protected]

Answer 3

I have encountered another scenario where this may occur.

I had v0.13.x as a direct dependency, and one of my dependencies had v0.12.x - so two copies of React were included in my bundle. This meant components using ES6 classes were attempting to extend a non-existent React.Component (they were getting the v0.12.x of React).

I diagnosed this issue by looking how many copies of react were in my node_modules:

npm ls | grep react@

Which gave me the following result:

├── [email protected]
│ └── [email protected]

The -C option for grep allows you to see surrounding lines, so I re-ran:

npm ls | grep [email protected] -C 5

The surrounding text allowed me to identify the offending package.