Webpack, React, and Multiple Versions Issues

Having your app include two different versions of React can lead to serious issues.

Posted by on April 2nd, 2015

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-d3 and 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 interal 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.js file 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.


– Justin


Justin is a Sr. Director of Engineering at Deseret Digital Media, Previous President of the Utah PHP Usergroup, and frequently works with the Utah Open Source Foundation which organizes the OpenWest Conference. Justin loves just about anything with web technologies from PHP, JavaScript, Node.js, Salt, and managing engineering teams.

Learn More