Atlaskit page layout component is not displayed properly

I am trying to use the page layout component and copied this example (page-layout/examples#integrated) and it renders properly in the first second and then it immedialtely becomes like this (white layer displayed on top of both the left side bar and the main section) :

I’ve used also another example (left sidebar) and still the same issue .

And the console also displays the warning bellow , I dont know if it help you solve my issue .

The console error you’re seeing is a React server-side rendering error that happens when the client renders different HTML than the server did. It’s relatively harmless. I am guessing you are using React 18 (as am I) and Atlaskit doesn’t support it (emotion is a style library that doesn’t support SSR in React 18 still). Only React 18. The effect of this error is that React will work a little harder on its first render. Some of these errors can be suppressed (there is a React setting to handle recoverable errors and another to suppress hydration warning).

As far as the page layout, I’m not sure exactly what is happening there. I am using it in Jira and it works fine. You might just need some content in it? Fwiw, I have also replaced some of the page layout subcomponents not for this reason, but because the API on those components is very limiting. There are some stylings I want on the sidebar that I can’t apply. You might find that replacing subcomponents helps you too.

Or maybe just downgrading to React 16 is the right decision for you - it might help here.

Best of luck!

Thank you for taking the time to take a look into my problem, but i am using react 16 not 18 , and I guess im having this problem because my project doesnt have typescript so basically all my react files are jsx not tsx , while the atlaskit documentation says the components are written in typescript .
If you wouldnt mind can you please guide me so my app (atlassian-connect-express) can support tsx , thanks in advance :pray: