Why do AtlasKit components render styles in Jira Software Server but not in JSD Server?

tbinna · February 7, 2020, 8:10am

My P2 app uses several AtlasKit components to render a project setting page (atl.jira.proj.config/projectgroup4). Until today, I thought this works without any issues (tested with Jira Software projects). However, if I open the same settings page in a JSD project my styled-components styles are gone (page renders as expected an is otherwise functional).

Unfortunately, there is no error message in the console that would hint on why it is not working. However, it seems that in the Jira Software project styled-components and emotion styles can work together. The head tag on the page contains <style data-emotion="css"> tags and <style data-styled-components> tags…

… in the JSD project, however, there is only a single empty styled-components style tag.

Has anyone seen this before or knows how to fix this?

tbinna · February 10, 2020, 7:13am

@daz sorry for tagging you directly but I believe you have been working in this area. I am a bit stuck with this. Have you seen this before or do you know someone who might have? Thanks!

moofoo · February 10, 2020, 10:48pm

For me that had something to do with devtool Webpack configuration, had to change it to eval. Sorry, do not recall more details than that

tbinna · February 11, 2020, 4:03am

Thanks for the hint, @moofoo. I will have a look at this and see if I can figure it out.

tbinna · February 11, 2020, 7:52am

@moofoo I have tried to change the devtool option to eval but that didn’t fix the issue. I don’t quite understand why that should fix the problem. The devtool option allows you to configure source map style. Why would that change how CSS styles are loaded?

moofoo · February 12, 2020, 3:42am

As I have mentioned, I do not recall all the details - that was nearly half a year ago, but in my case I was using hot reloading, so I assume the code generated by Webpack in development mode was not well picked up by the hot reload client on Jira side when used with the default value of devtool.

Just looked at my code and everything seems to work fine in both development and production mode. Yet the <style data-styled-components> tag is still empty for me, with the styles contained in separate <style> tags.

tbinna · February 13, 2020, 10:42am

Hey @moofoo I have just tested a production build and it seems the issue is gone there. Strange, I think you are right that in that this has something to do with the webpack config/build but I couldn’t figure out yet what it is. Changing the devtool doesn’t seem to do the trick for me. But thanks so much for leading me in the right direction. I will post here when I figure out what I had to change. At least I can release again knowing it works in production builds.