kiwicom/orbit

How to integrate using Rollup with orbit-components as the dependency?

MarioAtSirka opened this issue · 3 comments

Is your feature request related to a problem? Please describe.
Hi, me and my team are trying to build a design system like this also. But, there are a few components that we find are quite painful to build from scratch. Thus, we've been trying to explore our options as our 'base' component library. We find that since our product designers use orbit as a benchmark, we figure why not we use you guys' component library as well.

We currently use rollup as our bundling tool, and storybook as our presentation layer. We haven't done anything fancy like using lerna and stuff, since we are trying to build just the components that we can reuse that fit our design needs.

But, we encountered this problem on which there's this cryptic error that we do not understand. And so, I figured that I should ask that in here to have an insight of what is going on since this has been blocking us for quite some time.
image

Describe the solution you'd like
An insight to build component library using Rollup with orbit-components.

Describe alternatives you've considered
I'm unsure of what the problem is, perhaps the rollup configuration that I'm missing. Here's the rollup config:
image

And here is the example of the use case:
image

I'm thinking probably since we have you guys as the dependency, rollup figures that it might be another code that should be bundled. Thus, making you guys bundled up together (again) with our code.

Additional context
None, would be much appreciated if there's an insight that perhaps the team can help us with, thank you in advance! ☺️

hi @MarioAtSirka

We do not use rollup, so I can only guess, that's might be because you have set it as external in your rollup config. Try to remove that and add styled-components to dependencies 🤔

It works wonderfully, thank you so muchhh loll @mainframev!

I wonder why though? Because according to the styled-components documentation, it said that it's recommended to be put in the external field?
image

Is there a reason of why, because we use orbit, requires us to put it in the dependencies. And does this mean we're bundling a new styled-components in our own component library, creating more bigger bundle size?

Thanks for the help! 😄

I'm glad that it helped you :)

You do not have to have it as a dependency, because you are also working on a component library. So it has to be a peer dependency. So I guess it's the problem only for development, that rollup does not build a storybook with styled- components 👍🏻