React 15 Project не очень хорошо работает с библиотекой компонентов React версии 16

Question

У меня большой проект React (проект A), и я создаю библиотеку компонентов (проект B) для использования в этом проекте. В проекте B для создания карты слайд-шоу используется зависимость "реакция-отзыв-карусель", которую я хотел бы использовать в нескольких проектах, включая проект А.

Слайд-шоу и карта выглядят великолепно и работают, как и ожидалось, если смотреть в Storybook проекта B. При загрузке компонента карты (который находится в Проекте B) в Проект A, я сталкиваюсь со следующей ошибкой реакции (наряду с неработающим слайд-шоу): "Невозможно найти узел на размонтированном компоненте".

Если я удаляю слайд-шоу, использующее стороннюю зависимость, response-responseive-carousel, ошибка исчезает, и я вижу свою карту в Project A. Я использовал как ссылку npm, так и установку зависимости через локальный путь к файлу. и нежелательное поведение бывает в обоих направлениях.

Проект B (библиотека компонентов) использует React 16.3.2. Проект A использует React 15.6.2.

Я попытался понизить версию React для Project A до 15.6.2, но это вызывает ошибку в Storybook, которую я хотел бы продолжить использовать для публикации каталога компонентов.

Обновление Project A до 16.3.2 возможно, но я бы предпочел не делать это прямо сейчас из-за риска взлома Project A путем введения новой версии React. Это решение было рассмотрено здесь: Может ли мой проект (реакция 15) использовать зависимость, которая использует реакцию 16?

Смогу ли я использовать равноправные зависимости для решения этой проблемы? Являются ли зависимости от сверстников устаревшими? Есть ли другие потенциальные решения, которые я могу исследовать, или я должен просто смириться с этим и обновить проект A?

Как и просили, вот часть кода. Я сильно упростил это, пытаясь сохранить только то, что связано с этой проблемой.

Зависимости проекта B:

"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"
  }

Зависимости проекта А:

"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",
  }

Компонент Карты, который живет в Проекте 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;

В проекте B я просто импортирую карту и использую ее:

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

Answer 1

Смогу ли я использовать равноправные зависимости для решения этой проблемы? Являются ли зависимости от сверстников устаревшими? Есть ли другие потенциальные решения, которые я могу исследовать, или я должен просто смириться с этим и обновить проект A?

Если версии конфликтуют, то обязательно - вы должны использовать peerDependencies поскольку они не устарели, и это очень хороший вариант их использования - именно поэтому фреймворки, такие как create-реагировать-приложение или nextjs, не навязывают вам, какую версию реакции следует использовать в вашем проекте, но вы можете установить конкретную версию что вам нужно для вашего проекта.