SSR support is broken

[oleast]

Describe the bug It is not possible to use the design system in project using server-side rendering. Components can not even be imported from the project, since importing relies on the window to register things.

To Reproduce Steps to reproduce the behavior:

1. Try to import the package in node, e.g.

   const { Button } = require('@dotkomonline/design-system');

   Will result in an error like this:

   ReferenceError: window is not defined
   ...

Expected behavior I expect the package to be usable when using server-side rendering like in onlineweb-frontend or nextjs projects.

Additional context This comes from building the project with webpack, which we maybe should not do?

[FluidSense]

You're absolutely correct! The "culprit" is the target: web of the file webpack.config.js, meaning Webpack is packing our module to use in browsers only. Luckily, Webpack accepts several configs from the same file! I'll look into it, but adding a config for SSR (i.e. node) should do the trick. Do you have a not-too-large SSR-project I can test it on?

[oleast]

I think the most simple way to test it is to create a simple next app, just as you would create-react-app.

npx create-next-app <project-name>

cd <project-name>

yarn add @dotkomonline/design-system

yarn dev

Then add the button to the included component and then reload the page

[oleast]

My understanding of this is that the package should not be built with webpack.

Webpack should be used in the project that uses the design system, not to build the files here. Adding target: node will just make it impossible to use the project in a browser.

I can't really find any other libraries that build their project with webpack?