Search code examples
reactjsnpmstorybook

React 15 Project not playing well with a React component library using version 16

I have a large React project (Project A) and I am creating a component library (Project B) to use within that project . Project B uses the dependency 'react-responsive-carousel' to create a slideshow card, which I would like to use in multiple projects, including Project A.

The slideshow and card look great and work as expected when viewed under Project B's Storybook. When loading the card component (which lives in Project B) into Project A, I'm running into the following react error (along with a broken slideshow): "Unable to find node on an unmounted component."

If I remove the slideshow which uses the third party dependency, react-responsive-carousel, the error goes away and I can see my card in Project A. I've used both npm link as well as installing the dependency via a local file path, and the undesirable behavior happens both ways.

Project B (the component library) is using React 16.3.2. Project A is using React 15.6.2.

I have tried downgrading Project A's version of React to 15.6.2, but this causes an error with Storybook, which I would like to continue to use to share a catalog of components.

Updating Project A to 16.3.2 is a possibility, but I would rather not do it right now due to the risk of breaking Project A by introducing a new version of React. This solution was covered here: Can my project(react 15) use a dependency that using react 16?

Would I be able to use peer dependencies to solve this? Are peer dependencies deprecated? Are there other potential solutions I can explore, or should I just suck it up and update Project A?

As requested, here's some of the code. I've simplified this a lot, trying to only keep what has to do with this issue.

Project B's dependencies:

"devDependencies": {
    "@storybook/addon-knobs": "^3.3.13",
    "@storybook/react": "^3.4.0",
    "react": "^16.3.2",        
    "react-dom": "^16.3.1",
    "react-hot-loader": "^4.2.0",
    "react-redux": "^5.0.7",
    "react-responsive-carousel": "^3.1.37",
    "styled-components": "^3.2.5"
  }

Project A's dependencies:

"devDependencies": {
    "my-component-library": "file:../../my-component-library",
    "react": "^15.6.2",
    "react-addons-create-fragment": "^15.6.0",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.2",
    "react-responsive-carousel": "3.1.34",
  }

The Card component that lives in Project B:

    import React from 'react';
    import styled from 'styled-components';

    import { Carousel } from 'react-responsive-carousel';

    //styled components css/js for 
    //CardContainer that has been taken out to keep the post short

    const Card = ({
        stuff, 
        stuff, 
        stuff //simplified for post
    }) => {
        return (
        <CardContainer>
            <div className="carousel-container">

                <Carousel 
                    showThumbs={false}
                    showStatus={false}
                    emulateTouch={true}
                    infiniteLoop={true}> 
                        <img src="whatever.jpg" />
                        <img src="whatever.jpg" />
                        <img src="whatever.jpg" />
                </Carousel>
            </div>
        </CardContainer>
        );
    };
export default Card;

In Project B, I'm just importing the card and using it:

import { Card } from 'my-component-library';
<Card stuff={stuff} />
Solution

  • Would I be able to use peer dependencies to solve this? Are peer dependencies deprecated? Are there other potential solutions I can explore, or should I just suck it up and update Project A?

    If that's the versions clashing then sure - you should use peerDependencies as they are not deprecated and this is a very good use case for them - that's exactly why frameworks like create-react-app or nextjs don't impose on you which version of react you should use in your project but you can install specific version that you need for your project.