TypeError when using React: Cannot read property 'firstChild' of undefined

Question

Sometimes, when using React libraries, such as react-router, I get this error:

Uncaught TypeError: Cannot read property 'firstChild' of undefined
/~/react-router/~/react/lib/ReactMount.js?:606

How do I fix it?

Answer 1

This error is commonly caused by two versions of React loaded alongside.

For example, if you npm install a package that requires a different React version and puts it into dependencies instead of peerDependencies, it might install a separate React into node_modules/<some library using React>/node_modules/react.

Two different Reacts won't play nicely together (at least yet).

To fix it, just delete node_modules/<some library using React>/node_modules/react.
If you see a library putting React in dependencies instead of peerDependencies, file an issue.

Answer 2

In case anyone has this issue having npm linked two modules depending on react, I found a solution...

Let's say you have Parent depending on React, and Child depending on react. When you do:

cd ../child npm link cd ../parent npm link child

This causes this problem, because parent and child will each load their own instance of React.

The way to fix this is as follows:

cd parent cd node_modules/react npm link cd ../../../child npm link react

This ensures your parent project supplies the react dependency, even when linked, which is how npm would resolve the dependency when you are unlinked.