Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

mnajdovacommented, Apr 15, 2022

@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.

1reaction

Arber3434commented, Apr 5, 2022

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

Top Results From Across the Web

Module Constraints - Remix

Browser-only code - Remix renders on the server so your modules can't have module side effects or first-rendering logic that call browser-only APIs ......

Remix is returning Hydration Error when attempting to map data

When I refresh, that's when I get SSR errors. Does that mean that there is a cache issue? Or that I am not...

Changelog - Shoelace

Changelog. Shoelace follows Semantic Versioning. Breaking changes in components with the Stable badge will not be accepted until the next major version.

useHooks - Easy to understand React Hook recipes

We bring you easy to understand React Hook code recipes so you can learn how React hooks work and feel more comfortable writing...

Remix Blog Tutorial - Remix, React, Prisma, MongoDB, Vercel ...

Let's run the default Remix App. We are going to do a test run to make sure you can get Remix up and...