在此应用程序中初始化了多个 ‘styled-components’ 实例。

huangapple go评论73阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年7月13日 00:48:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/76672848.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定