[examples] Bizarre render bug when a Button is used inside a Card on SSR (remix-run)

[dan-cooke]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Codesandbox: https://codesandbox.io/s/happy-monad-5qif8r?file=/app/src/createEmotionCache.ts

Following the remix run example, when using a Button or IconButton inside a Card > CardActionArea - it seems that the server side render puts additional cards outside the layout.

I cannot really describe what I'm seeing, its better to just look at the code sandbox.

Weirdest bug i've seen this year so far.

I'm also not sure where to file the bug report, here or over on @remix-run. But at the moment I feel like its probably something that the CardActionArea is doing that is not fully supported by remix? Either that, or the remix integration example is missing something.

Note: I also tried initialising the emotion cache with prepend: true but this causes my app to render nothing at all.

Expected behavior 🤔

It should not duplicate the render of certain cards

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

No response

[mnajdova]

What exactly are you seeing? I see the 5 cards, and that's what I would expect, no? Could you do a screenshot?

[github-actions]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed.
If you wish to see the issue reopened, please provide the missing information.

[dan-cooke]

@mnajdova

What exactly are you seeing? I see the 5 cards, and that's what I would expect, no? Could you do a screenshot?

Apologies, I removed the broken code after posting this issue. If you check again now you will see the following:

If you could re-open this issue, it would be appreciated

[Arber3434]

I also just encountered this issue. Good to see that it has already been reported!

[github-actions]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed.
If you wish to see the issue reopened, please provide the missing information.

[mnajdova]

@danilo-leal if you re-open the issue but it still has the status:incomplete label it will close again in a week :) You need to remove it if there is a reproduction.

@dan-cooke I'll take a look as soon as I can.

[mnajdova]

@dan-cooke I am not seeing what you have in the screenshot:

Also, there are lots of console errors currently on the sandbox. Please double-check again

[dan-cooke]

@mnajdova can you screenshot what you are seeing? I just confirmed that I can still see it.

[mnajdova]

@dan-cooke I tried updating the sandbox to match what is done in https://github.com/remix-run/remix/tree/main/examples/emotion and it looks like it works now: https://codesandbox.io/s/eager-hopper-szb7th?file=/app/routes/index.tsx

However, things were updated in our remix example, so that we can avoid double rendering in #30366, so it may be the case that it is broken after this. I will need to take a closer look at this when I have some time. I am adding it on my TODO list