Plusieurs instances de « Style Component » sont initialisées dans cette application

Question

J'ai essayé toutes les solutions et j'en viens maintenant à cette question, je construis une bibliothèque de composants d'interface utilisateur.

J'ai deux packages, un pour la bibliothèque et un pour la démo, la démo utilise la bibliothèque à l'aide d'un lien symbolique, fichier : ../ui dans son package.json, je construis d'abord la bibliothèque puis je l'utilise dans le package de démonstration

Le code est disponible sur https://github.com/Qawaz/qal-ui/

J'essaie d'utiliser npm dedupe 删除重复依赖项，但没有成功。使用命令 npm ls styled-components J'obtiens

+-- @paljs/ui@1.1.1 -> .\..\ui
| `-- styled-components@6.0.3
+-- babel-plugin-styled-components@2.1.4
| `-- styled-components@6.0.3 deduped
+-- gatsby-plugin-styled-components@6.11.0
| `-- styled-components@6.0.3 deduped
`-- styled-components@6.0.3

Auparavant, j'ai activé le module parent et l'espace de travail, et les deux packages utilisaient npm pour partager des dépendances, mais j'ai supprimé cela et je suis passé à des modules complètement séparés, mais un module avait des dépendances sur l'autre à l'aide de liens symboliques.

• styled-components est une dépendance homologue dans la bibliothèque de composants, pas une dépendance directe
• Les versions des composants de style des deux projets restent cohérentes
• Utiliser Gatsby, utiliser le plugin Babel pour les composants stylisés et le plugin Gatsby pour les composants stylisés

Ajoutez ceci à mon gatsby-node.js message (suggéré dans certaines réponses)

const path = require("path")
exports.onCreateWebpackConfig = ({stage, actions}) => {
    actions.setWebpackConfig({
        resolve: {
            alias: {
                "styled-components": path.resolve("node_modules", "styled-components"),
            }
        }
    })
}

J'obtiens cette erreur dans la console, cette erreur est un faux positif, si vous changez quelque chose dans gatsby-config et au hasard ça disparaît

export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)

Certaines réponses l'indiquent également et cela a provoqué la rupture de mon build

optimization: {
    runtimeChunk: {
        name: "vendor"
    }
}

Answer 1

J'ai découvert que si vous utilisez un composant d'une bibliothèque qui est également utilisé en raison de plusieurs instances styled-components，那么 styled-components, il commencera à se plaindre.

Je suis donc passé à emotion, j'ai gardé emotion dans la dépendance des pairs et l'expérience a été bien meilleure car emotion contient La plupart des fonctionnalités de styled - les composants et l'API sont très similaires. emotion，我将emotion保留在对等依赖关系中，并且体验要好得多，因为emotion包含styled的大部分功能-components 和 API 非常相似。

还有 goober 提供了一个设置方法，可以由库使用者 goober 调用> 是一个很棒的选择，但是当我尝试使用 goober 时，它不包含 useTheme 钩子，而且 goober

goober fournit également une méthode de configuration qui peut être appelée par le consommateur de la bibliothèque goober >, ce qui est une excellente option, mais lorsque j'essaie d'utiliser goober, elle ne contient pas le hook useTheme, et goober accorde une grande attention à garder le paquet plus petit tout en fournissant la fonctionnalité CSS js. 🎜