Webpack, React, and Multiple Versions Issues

I’ve been using React successfully for several projects, and tonight I ran into a problem I hadn’t experienced before. I was trying both react-d3and react-d3-components when I would get an error on rendering:

Uncaught TypeError: Can't add property context, object is not extensible

This error had a very, very deep stack trace far into the depths of React, and I was worried I had encountered a nasty React bug. After some poking around & googling, I discovered that multiple versions of React do not play nicely with each other, at all. When I had installed both those react component libraries, each installed their own version of React, version 0.12. I was using React version 0.13.

So components coming from react-d3 had different internal React stuff than the rest of my components in my App. The solution was to have my App use the same version of React throughout the whole project. You can accomplish this with webpack aliases. In my webpack.config.jsfile I added the following config:

module.exports = {
    // ... other settings ...

    resolve: {
        alias: {
            "react": __dirname + '/node_modules/react',
            "react/addons": __dirname + '/node_modules/react/addons',
        }
    }

    // ... other settings ...
}

Now when react-d3 would attempt to require React, instead of using it’s own outdated version it would use the version I had installed. This also cut down on the size of my compiled JavaScript.

Hopefully, this can help someone out and not have them lose a few hours to this problem.

Thanks,

— Carmony