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 
So sorry I didn’t see your reply until now. Did you still need help?
Note that this error has nothing to do with typescript. It happens because the server and client rendered two different things. If you have any logic that is aware of server vs client, you often want to run it in a useEffect so it only happens on the client (and everything outside the useEffect matches between client and server.
Adding typescript to your repo can be a little involved and take judgement about what you want to get out of it. I compile my code with esbuild for speed for example, but others might use tsc for different behavior or use a higher level bundler like Vite that takes care of everything for you (if you can set it up…). I hope you found your answer already (sorry again for the delay…) but if you didn’t, you probably need research and more than a response on a post like this.
Cheers,
Adam
Thank you so much, yes I havent researching after your answer, and I didnt stop working on that project until i have made everything work (added typescript and fixed problems that i had) and delivered it, its true that atlaskit lacks a bit of support updates and coherence with the atlas cli but it is what it is 
Glad to hear it worked out! Congratulations!
Atlaskit is a bit behind on dependencies, that’s true. I’m still holding out hope we get React 18 support before React 19 comes out. 
Take care!
