I have come across 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.

A NextJs app with SC. Importing a component library:

* Minimal reproduction repo:
<https://github.com/tadej321/nextjs-test.git>

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.

I have set up a minimal reproduction repo, so that anyone can test out this issue, below are the commands to compile the component library. Feel free to push and pull your changes to the repo I have provided.

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 transpile command and set the main in package.json to:

```
"main": "./dist/index.transpiled.js"

```

If I have not provided enough information to resolve this issue please let me know and I will add it to the post.

Edit:
=====

In the screenshot bellow, you can see two components. The top is defined in the next.js app and is rendered with styles. The bottom is imported from the component library and lacks styles when rendered on the server.

[screenshot of the page](https://i.stack.imgur.com/RQEsp.png)