Как передать библиотеку компонентов React, зависящую от Styled Components, в другую библиотеку, которая также имеет зависимость Styled Comopnents?

Question

Я недавно преобразовал внутреннюю библиотеку компонентов, над которой работаю, в Styled Components. В этой библиотеке компонентов есть стилизованные компоненты, перечисленные как peerDep и devDep в package.json. Оттуда я импортирую Styled Comopnents в каждый компонент, который нуждается в стилизации. До этого момента все прекрасно работало.

У меня есть приложение Create React App (CRA), которое также импортирует стилизованные компоненты в качестве обычной зависимости. Мне нужно это, чтобы иметь возможность создавать одноразовые компоненты для этого конкретного проекта. НО мне также нужна возможность импортировать мою библиотеку компонентов для создания основных компонентов для этого нового приложения на основе CRA.

Теперь это моя проблема: я тестирую мою недавно преобразованную библиотеку компонентов на основе Styled Components в этом приложении CRA, связываясь напрямую с библиотекой компонентов в package.json (file:../component-lib). Я установил все свои deps, импортировал компоненты из библиотеки компонентов, создал новый проектный компонент Styled в рамках проекта CRA и запустил его локально только для того, чтобы увидеть эту же ошибку: «Похоже, есть несколько случаев« styled- компоненты инициализированы в этом приложении. Это может привести к неправильной визуализации динамических стилей, возникновению ошибок во время процесса регидратации и увеличению размера вашего приложения без веской причины ». Я прочитал этот раздел документации и научился не использовать ссылку npm и служить SC как peerDep и devDep в моей библиотеке компонентов.

Я полагаю, что эта проблема не позволяет мне получить доступ к темам, которые я передаю в пользовательский ThemeProvider из библиотеки компонентов, поскольку я запускаю несколько экземпляров в проекте CRA?

Эта проблема, безусловно, из-за моего недостатка знаний в управлении зависимостями. Мне просто интересно, сталкивался ли кто-нибудь еще с подобной проблемой или что я должен делать, чтобы избежать дублирования экземпляров Styled Comopnents?

Индекс библиотеки компонентов

export { default as Button } from "./components/Button";

export {
  default as CustomThemeProvider
} from "./components/utils/CustomThemeProvider";

Библиотека компонентов package.json

"scripts": {
    "build": "nwb build-react-component --copy-files",
    "clean": "nwb clean-module && npm clean-demo",
    "start": "nwb serve-react-demo",
    "lint": "eslint src/**",
    "test": "nwb test-react",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "test:coverage": "nwb test-react --coverage",
    "test:watch": "nwb test-react --server",
    "publish": "npm run build && npm publish"
},
"dependencies": {
    "@rebass/grid": "^6.0.0-4",
    "prop-types": "^15.6.0",
    "react-portal": "^4.1.2"
},
"peerDependencies": {
    "react": "16.x",
    "styled-components": "^4.0.3"
},
"devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.18.2",
    "eslint-plugin-react": "^7.7.0"
    "prettier": "1.14.3",
    "nwb": "0.22.x",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-styleguidist": "^7.2.0",
    "styled-components": "^4.0.3"
},

Конфигурация библиотеки компонентов NWB

module.exports = {
  type: "react-component",
  npm: {
    esModules: false,
    umd: false,
  },
  babel: {
    stage: 1
  }
};

CRA Project package.json

"dependencies": {
  "component-library": "0.16.6",
  "react": "^16.6.0",
  "react-dom": "^16.6.0",
  "react-scripts": "2.1.0",
  "styled-components": "^4.0.3"
},

Answer 1

Это только частичный ответ, который, я надеюсь, позволит вам или кому-то еще выяснить остальное. Я далеко не эксперт по управлению такого рода зависимостями и помогаю в этом, чтобы расширить свои собственные знания, так как я, возможно, скоро захочу выполнить аналогичную настройку.

Хотя кажется, что это должно быть выполнимо с nwb, я переключился на использование webpack напрямую, чтобы иметь больше контроля. Даже используя веб-пакет напрямую, я только сделал его частью пути. Когда я делаю сборку, все работает правильно, но в режиме разработки (запуск npm) для приложения CRA пакет styled-components все еще загружается дважды, и стилизация работает неправильно. Это кажется потенциальной проблемой веб-пакета, так как режимы разработки и производства ведут себя по-разному, но это может быть что-то с конфигурацией разработчика веб-пакета CRA или (что более вероятно) с некоторыми аспектами этого, которые я пока не понимаю.

Это хороший пример для ссылки на конфигурацию библиотеки компонентов: https://github.com/kalcifer/webpack-library-example

Вот мой package.json для моего тестового компонента lib (component-lib 3 только из-за попытки нескольких других подходов):

{
  "name": "component-lib3",
  "version": "1.0.7",
  "description": "component-lib3 React component",
  "main": "dist/component-lib3.js",
  "peerDependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "styled-components": "^4.0.3"
  },
  "devDependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "styled-components": "^4.0.3",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.24.0",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "build": "webpack"
  }
}

Вот webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'component-lib3.js',
    libraryTarget: 'umd',
    library: 'component-lib3'
  },
  externals: {
     "styled-components": {
       commonjs: 'styled-components',
       commonjs2: 'styled-components',
       amd: 'styled-components'
     },
     "react": {
       commonjs: 'react',
       commonjs2: 'react',
       amd: 'react'
     },
     "react-dom": {
       commonjs: 'react-dom',
       commonjs2: 'react-dom',
       amd: 'react-dom'
     }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

А затем также .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

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