英文:
Several Instances of 'styled-components' initialized in this application
问题
I've tried all the solutions and now have come to ask this question, I am building a ui component library.
I have two packages, one for the library, one for the demo. The demo makes use of the library using a symlink, file:../ui in its package.json. I build the library first and then consume it in the demo package.
The code is available at https://github.com/Qawaz/qal-ui/
I've tried deduping dependencies using npm dedupe
but it didn't work. Upon using the command npm ls styled-components
, I get:
+-- @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
Previously I had the parent module and workspaces enabled, and the two packages were sharing dependencies using npm, but I removed that. I migrated to completely separate modules, but one module makes a dependency on the other using a symlink.
styled-components
is a peer dependency in the component library, not direct.- The version of
styled-components
is consistent across both projects. - Gatsby is being used, and babel plugin for styled components & gatsby plugin for styled components are being used.
After adding this to my gatsby-node.js
, which is suggested in some answers:
const path = require("path")
exports.onCreateWebpackConfig = ({stage, actions}) => {
actions.setWebpackConfig({
resolve: {
alias: {
"styled-components": path.resolve("node_modules", "styled-components"),
}
}
})
}
I get this error in the console. This error is a false-negative. It goes away if you change something in your gatsby-config
and appears at random times:
export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)
Some answers also suggest this. It causes my build to break:
optimization: {
runtimeChunk: {
name: "vendor"
}
}
英文:
I've tried all the solutions and now have come to ask this question , I am building a ui component library.
I have two packages , one for library , one for demo , The demo makes use of library using a symlink , file:../ui in its package.json , I build the library first and then consume it in the demo package
The code is available at https://github.com/Qawaz/qal-ui/
I've tried deduping dependencies using npm dedupe
but it didn't work. Upon using command npm ls styled-components
I get
+-- @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
Previously I had parent module and workspaces enabled and the two packages were sharing dependencies using npm but I removed that , I migrated to completely separate modules but one module makes a dependency on the other using symlink.
- styled-components is a peer dependency in the component library not direct
- version of styled-components is consistent across both projects
- gatsby is being used , babel plugin for styled components & gatsby plugin for styled components are being used
After adding this to my gatsby-node.js
, which is suggested in some answers
const path = require("path")
exports.onCreateWebpackConfig = ({stage, actions}) => {
actions.setWebpackConfig({
resolve: {
alias: {
"styled-components": path.resolve("node_modules", "styled-components"),
}
}
})
}
I get this error in the console , This error is a false-negative , It goes away if you change something in your gatsby-config
and appears at random times
export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)
Some answers also suggest this , It causes my build to break
optimization: {
runtimeChunk: {
name: "vendor"
}
}
答案1
得分: 0
我发现,如果您正在使用一个使用了styled-components
的组件库,styled-components
会开始抱怨,因为存在多个实例。因此,我切换到了emotion
,将emotion
保留在对等依赖项中,体验好多了,因为emotion
包含了大多数styled-components
的功能,API也非常相似。还有goober
,它提供了一个设置方法,可以被库的消费者调用,goober
是一个很棒的选择,但当我尝试使用goober时,它不包含useTheme
钩子,而且goober
非常专注于保持捆绑包更小,同时提供了css in js 的功能。
英文:
I found that styled-components
just starts complaining if you are using a library with components which also uses styled-components
because multiple instances.<br><br>
So I switched to emotion
, I keep emotion
in peer dependencies and the experience is much better, Since emotion
contains most features of styled-components
and API is very similar.<br><br>There's also goober
which provides a setup method, which can be called by the library consumer, goober
is a fantastic choice but when I tried to use goober, It didn't contain useTheme
hook plus goober
is very focused on keeping the bundle smaller while delivering features of css in js.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论