Next.js: React attempted to reuse markup in a container but the checksum was invalid

[davidnguyen179]

When I use styled-component feature extend with next.js

Version

next.js: 3.0.0-beta13
styled-component: 2.0.1

Steps to reproduce

I have UL component

const UL = styled.ul`
  padding: 0;
  margin: 0;
  list-style-type: none;
  outline: none;
`;

ListNave component

const ListNav = UL.extend`
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
`;

usage:

<ListNav>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ListNav>

Expected Behavior

No warning

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) g></a><ul class="sc-bdVaJa fPaAHZ" data-
 (server) g></a><ul class="sc-gqjmRU daXqbi" data-

Actual Behavior

There is a warning in console

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) g></a><ul class="sc-bdVaJa fPaAHZ" data-
 (server) g></a><ul class="sc-gqjmRU daXqbi" data-

[vcebotari]

• same problem !!!

[vcebotari]

i think this happens when styled components init, it generate className for styled components at every new build.

• client one class
• server another class

[quentin-sommer]

Yes, you have ton configure styled-components for server-side rendering, you can follow the example in next repo or in styled-components official docs https://www.styled-components.com/docs/advanced#nextjs

[davidnguyen179]

Hi @quentin-sommer !!!

I have styled-component worked well in my project. But have you tried extend feature?. I may want to know how you pass it.

I followed

• https://www.styled-components.com/docs/advanced#nextjs
• https://github.com/zeit/next.js/tree/v3-beta/examples/with-styled-components

[quentin-sommer]

Hi, I haven't tried the extend feature

Le jeu. 15 juin 2017 16:14, David Nguyen [e-mail] a
écrit :

Hi @quentin-sommer https://github.com/quentin-sommer !!!

I have styled-component worked well in my project. But have you tried
extend feature?. I may want to know how you pass it.

I followed

• https://www.styled-components.com/docs/advanced#nextjs
  -
  https://github.com/zeit/next.js/tree/v3-beta/examples/with-styled-components

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/2272#issuecomment-308746119, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AItOGIKSf0qadRhgyEBMpok5mGKiARt0ks5sETw5gaJpZM4N6_Vr
.

>

Quentin Sommer

[drejohnson]

I have the same issue when using extend

[vcebotari]

i followed @quentin-sommer doc link's, have same problem...

[gbiryukov]

actually it is babel-plugin-styled-components issue #52

[andyngo]

Is there a solution to this? Getting a weird behaviour where my styles are flashing as they are being overridden.

[gbiryukov]

The only workaround is to define mixin:

const input = props => `
  background: ${props.disabled ? '#ccc' : '#fff'};
  display: inline-block;
  width: 50%;
`;

export const Input = styled.input`
  ${input}
`;

export const Textarea = styled.textarea`
  ${input}
  width: 100%;
`;

[Sotorin]

I'm getting the same thing with semantic-ui example.

[canadaduane]

What's the best way to view and compare the server-rendered and client-rendered html? I have this same issue, but I'm not sure what's causing it. I'd like to understand how to debug/diagnose. Thanks!

[timneutkens]

Closing this as it's a styled-components issue. Please see https://github.com/styled-components/babel-plugin-styled-components/issues/52. Thanks @gbiryukov for mentioning that.

[shelldandy]

@timneutkens im having that issue even though im not using styled.extend or any of the things discussed on that issue 😢

[obedparla]

Having this issue at the moment. I'm not using extend, simply using bootstrap and using global styles as in this example: https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet

After removing bootstrap I stopped having the issue, so I investigated to see if it was something to do with Bootstrap, I found out that it doesn't matter what CSS (or scss in my case) I'm using, it's about the size. If I copy and paste the same rule for 3 o 4 thousand lines it will start giving me this error.

The error doesn't happen all the time, and it seems it's a problem with the sync of the server and the client? Not sure.

Anyone having a similar issue? Idk if I should open a new issue since this is unrelated to extend or styled components.

[daroldso]

It seems the most common cause is className/style changes in client side under browser logic. Below is a button which determine its className by cookies that causes this error.

<button className={item.locale === Cookies.get('locale') ? 'some-class' : ''}>
  Submit
</button>

The error is gone after I change it to

<button className="some-class">
  Submit
</button>