In dieser Anwendung werden mehrere Instanzen von „Style Component' initialisiert

Question

Ich habe alle Lösungen ausprobiert und komme nun zu dieser Frage: Ich baue eine UI-Komponentenbibliothek.

Ich habe zwei Pakete, eines für die Bibliothek und eines für die Demo. Die Demo verwendet die Bibliothek über einen Symlink, Datei: ../ui in ihrer package.json. Ich erstelle zuerst die Bibliothek und verwende sie dann im Demo-Paket

Der Code ist unter https://github.com/Qawaz/qal-ui/

verfügbar

Ich versuche es mit npm dedupe 删除重复依赖项，但没有成功。使用命令 npm ls styled-components, ich bekomme

+-- @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

Zuvor habe ich das übergeordnete Modul und den Arbeitsbereich aktiviert, und beide Pakete verwendeten npm, um Abhängigkeiten zu teilen, aber ich habe das entfernt und bin zu völlig separaten Modulen übergegangen, aber ein Modul hatte über symbolische Links Abhängigkeiten vom anderen.

• styled-components ist eine Peer-Abhängigkeit in der Komponentenbibliothek, keine direkte Abhängigkeit
• Die Stilkomponentenversionen der beiden Projekte bleiben konsistent
• Gatsby verwenden, Babel-Plugin für gestaltete Komponenten und Gatsby-Plugin für gestaltete Komponenten verwenden

Fügen Sie dies zu meinem gatsby-node.js Beitrag hinzu (in einigen Antworten vorgeschlagen)

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

Ich erhalte diesen Fehler in der Konsole. Dieser Fehler ist falsch positiv, wenn Sie etwas ändern gatsby-config und er verschwindet zufällig

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

Einige Antworten deuten auch darauf hin und es hat dazu geführt, dass mein Build kaputt gegangen ist

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

Answer 1

我发现，如果您使用的库中的组件也因为多个实例而使用 styled-components，那么 styled-components 就会开始抱怨。

所以我切换到emotion，我将emotion保留在对等依赖关系中，并且体验要好得多，因为emotion包含styled的大部分功能-components 和 API 非常相似。

还有 goober 提供了一个设置方法，可以由库使用者 goober 调用> 是一个很棒的选择，但是当我尝试使用 goober 时，它不包含 useTheme 钩子，而且 goober 非常注重保持包更小，同时提供 css 功能js。