このアプリケーションでは「スタイル コンポーネント」の複数のインスタンスが初期化されます

Question

すべての解決策を試しましたが、今この質問に行き着き、UI コンポーネント ライブラリを構築しています。

ライブラリ用とデモ用の 2 つのパッケージがあります。デモではシンボリックリンクを使用してライブラリを使用します。ファイル: ../ui その package.json で、最初にライブラリをビルドしてから、デモには

が含まれています

コードは https://github.com/Qawaz/qal-ui/

から入手できます。

npm dedupe を使用して重複した依存関係を削除しようとしましたが、成功しませんでした。コマンド npm ls styled-components を使用すると、

が得られます。 リーリー

以前は、親モジュールとワークスペースを有効にし、両方のパッケージが npm を使用して依存関係を共有していましたが、それを削除し、完全に独立したモジュールに移行しましたが、一方のモジュールがシンボリックリンクを使用してもう一方のモジュールに依存関係を作成していました。

• styled-components はコンポーネント ライブラリ内のピア依存関係であり、直接の
ではありません。
• 2 つのプロジェクトのスタイル コンポーネントのバージョンは一貫しています
• gatsby を使用し、スタイル付きコンポーネントに babel プラグインを使用し、スタイル付きコンポーネントに gatsby プラグインを使用する

これを gatsby-node.js に追加した後 (一部の回答で提案されています)

リーリー

コンソールにこのエラーが表示されます。このエラーは誤検知です。gatsby-config で何かを変更すると消えますが、ランダムに表示されます

リーリー

一部の回答でもこれが示されており、それが原因でビルドが壊れました

ああああ

Answer 1

複数のインスタンスがあるため、styled-components も使用するライブラリのコンポーネントを使用すると、styled-components がエラーを出し始めることがわかりました。

そこで、emotion に切り替え、emotion をピアの依存関係に保持しました。emotion には、大きな スタイルのいくつかの関数が含まれているため、エクスペリエンスがはるかに向上しました。コンポーネントはAPIと非常によく似ています。

また、goober は、ライブラリ コンシューマーによって呼び出すことができるセットアップ メソッドを提供します。 goober > は優れたオプションですが、goober を使用しようとすると、 useTheme フックが含まれており、goober は CSS 機能 js を提供しながらパッケージを小さくすることに重点を置いています。