Styles of component imported from component library not applied during ssr.

[tadej321]

I have come accross an issue where styles of a component, that is imported from my component library which is bundled with webpack 5, are not applied during ssr.

I have two projects.

1. A NextJs app with SC. Importing a component library minimal reproduction repo: https://github.com/tadej321/nextjs-test.git

2. A React component library with SC and bundled with webpack 5. Imported into my NextJs app minimal reproduction repo: https://github.com/tadej321/component-library-test.git

The component library is added as a dependancy to the NextJs app. Once the page is updated on the client, the styles are applied correctly, just the inital render of the page lacks the styles.

I do not know if the problem is with SC or NextJs. But if I dont bundle the component library with webpack and instead only transpile with babel using this configuration: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["babel-plugin-styled-components"] } then NextJs performs ssr with styles applied.

To bundle the component library run the npm run build command and set the main in package.json to: "main": "./dist/index.js" To transpile with babel run the npm run transiple command and set the main in package.json to: "main": "./dist/index.transpiled.js"

[mnajdova]

It's similar to issue that we have at MUI - https://github.com/mui-org/material-ui/issues/29742

[rake7h]

facing similar issue for an external package. Styles are breaking on client after hydration, this is happening only on production mode :(