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 
