Issue while using atlaskit component with jira server plugin development

We are facing one major issue while working with Atlaskit components and creating a server plugin.

One of the Atlaskit package “media-ui” is using styled-components – a third party package.

But we cannot use @atlaskit/meda-ui with latest version of styled-components, we are getting error as shown in attachment below.

Also it was mentioned in that package that it user a peer dependency of styled-components (3.2.6 version). We tried with this version, but this version creates problems when there are other addons which also uses styled-components.

We have identified that latest version of styled-components have fixed this issue. But that doesn’t work with @atlaskit/media-ui as mentioned previously.

So we would like to know if there is a work around for this issue, or can you provide latest styled-component version support for atlaskit components

1 Like

@karanpalan officially, the media packages are for internal Atlassian use only, so I would not expect any support on those components. In addition, Atlassian has been moving away from Styled Components to Emotion ( which will make it highly unlikely that they will update the dependency for any of the AtlasKit packages.

My strong advise would be to make sure that you can work with SC 3.2.6, as this is the last version used by all AtlasKit components that have not yet migrated to Emotion. Apart from not being compatible with React 17+, SC 3.2.6 does not have many breaking changes compared to later versions.

1 Like

Just confirming from an internal perspective that this is correct. Ak are moving away from styled-components and it’s very unlikely that they’ll bump the peer dependency range in the meantime. You should make sure your code is compatible with v3.

thanks for the update that Atlaskit will move to Emotion.
The issue with SC3.2.6 is that it adds styled components in the head tag.
and when there are multiple server addon it creates conflicts as shown in one of the attachment.
So is there any work around for that.
I figured that this kind of issues are resloved in latest SC version and using aliasing in webpack but that solution doesnt seem to work with SC 3.2.6

Thank for the information about Atlaskit moving away from styled-components.
Our code is compatible with SC v3 and latest SC versions also
SC 3.2.6 creates conflicts when there are other server addons which also uses SC as they add styled tags within head tag.
Also upgrading SC version solves that issue but some of atlaskit components code is not compatible with latest SC version. I also went through the atlaskit code and seems like there is a minor code change that is needed to make those components compatible with SC v4.

As it is mentioned in your profile that you work for Atlassian, So can we raise this issue within any of your team if possible. Also any other workaround for this might also be helpful

Sadly, Ak are a small team and don’t have the bandwidth to make those changes. If it’s a small thing, you might be able to fork the Ak code and make it yourself?

The media team internally will be migrating this component to Emotion. No word on when, but I’ll update this post as soon as it’s done.

1 Like