Multiple instances of 'Style Component' are initialized in this application

Question

I have tried all the solutions and now come to this question, I am building a ui component library.

I have two packages, one for the library and one for the demo, the demo uses the library using a symlink, file: ../ui In its package.json, I build the library first and then use it in the demo It contains

The code is available at https://github.com/Qawaz/qal-ui/

I tried using npm dedupe to remove duplicate dependencies without success. 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 enabled the parent module and workspace and both packages shared dependencies using npm, but I removed that and I migrated to completely independent modules, but one module used symlinks to make dependencies on the other module .

• styled-components is a peer dependency in the component library, not a direct
• The style component versions of the two projects remain consistent
• Using gatsby, using babel plugin for styled components and gatsby plugin for styled components

After adding this to my gatsby-node.js (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 positive, it goes away if you change something in gatsby-config and it randomly appears

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

Some answers also indicate this and it caused my build to break

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

Answer 1

I found that if you use a component from a library that also uses styled-components due to multiple instances, then styled-components will start complaining.

So I switched to emotion, I kept emotion in the peer dependency, and the experience was much better because emotion contains the large styled Some functions - components are very similar to the API.

Alsogoober provides a setup method that can be called by the library consumer goober > is a great option, but when I try to use goober, It does not contain useTheme hooks, and goober is very focused on keeping the package smaller while providing css functionality js.