Styled components in component library

[mrcrazylee]

Hi

I've searched long and far, but could not find much information about this topic.

I have a component library that is distributed through an npm package. This library uses styled-components for styling. In this project, styled-components is listed as a peerDependency in package.json.

The component library is then consumed in a separate NextJS project. Currently I am running into issues regarding SSR, using the babel-plugin-styled-components in the NextJS project.

The problems I am running into:

1. If I enable displayName through babel-plugin-styled-components, I see it only happening for styled components from the NextJS project. Class names from components from the component library are not affected.
2. I seem to be experiencing SSR issues in the NextJS project, but specifically for components that are imported from the component library.

My main question is;
Is it possible for the component library package to inherit the babel-plugin-styled-components settings from the .babelrc from the consuming project?

Does anybody know of any examples of similar setups?

[sindrisig]

I don't think is specifically a Nextjs problem. I have had the same problem in non next applications. I am sorry but I don't have a solution to this. But keeping an eye on this

[aboozaid]

Did you figure it out? I have the same issue @mrcrazylee

[quantizor]

The most common cause of issues when using styled-components in a component library is multiple instances of the library being bundled. Ensure that:

1. styled-components is a peerDependency in your library (which you have)
2. Your library build does not bundle styled-components — mark it as external in your bundler config
3. The consuming app has only one copy installed — run npm ls styled-components to verify
4. If using the Babel plugin in the consuming app, the displayName and component IDs generated at build time must be deterministic and not conflict with the ones baked into the library

For SSR with Next.js, the consuming app needs its own styled-components registry setup regardless of the library.