在此应用程序中初始化了多个'样式组件”实例

Question

我已经尝试了所有的解决方案，现在来问这个问题，我正在构建一个 ui 组件库。

我有两个包，一个用于库，一个用于演示，该演示使用符号链接使用库，文件：../ui 在其 package.json 中，我首先构建库，然后在演示中使用它包

代码可在 https://github.com/Qawaz/qal-ui/ 获取

我尝试使用 npm dedupe 删除重复依赖项，但没有成功。使用命令 npm ls styled-components 我得到

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

以前，我启用了父模块和工作区，并且两个包使用 npm 共享依赖项，但我删除了它，我迁移到完全独立的模块，但一个模块使用符号链接对另一个模块进行依赖。

• styled-components 是组件库中的对等依赖项，不是直接的
• 两个项目的样式组件版本保持一致
• 正在使用 gatsby，正在使用用于样式组件的 babel 插件和用于样式组件的 gatsby 插件

将其添加到我的 gatsby-node.js 后（某些答案中建议这样做）

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

我在控制台中收到此错误，此错误是误报，如果您更改 gatsby-config 中的某些内容并随机出现，它就会消失

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

一些答案​​也表明了这一点，它导致我的构建中断

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

Answer 1

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

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

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