Invalid checksum

[rtymchyk]

I am using the babel plugin 1.1.5 with styled components 2.1.0. I have placed a ssr: true in both the client and the server babel configs.

However, I always see this mismatch in checksum:

(client) P gradient-container___default-s1b1hs7t-
(server) P gradient-container-s1b1hs7t-0 ieOpth"

This tells me that the plugin is enabled for both the client and server, but the client consistently has this __default string as part of the class name. Where is this coming from?

[kitten]

Hm, can you try disabling the displayName option? It seems that something is leaking into the name there. Maybe the transpilation is not identical, and it's using default from export default or sth?

Also, currently the plugin doesn't support withComponent and extend. This will be added with the changes in v3

[rtymchyk]

Thanks for your reply @philpl I don't use those methods from the API, but you have me an idea to try. Will get back to you.

[rtymchyk]

So the issue was that we have components that look like

export default styled.div`
...
`

For now I'm just assigning it to a const and exporting that instead.

[kitten]

Ah, it seems then that we're not falling back to attaching a componentId based on the filename only. Something to look into, I suppose

On the other hand, generally it's not a good idea to directly export unnamed components. Exporting arrow functions without a name for example will lead to nameless components

But anyway, I'll have a quick look and see if there's any obvious problems in the plugin

[gregberge]

Also, currently the plugin doesn't support withComponent and extend. This will be added with the changes in v3

@philpl I need this, can I help?

[kitten]

@neoziro It's not possible to make this work with our current set-up of withConfig. It's going to change completely in v3 with a new architecture and core library for preprocessing, so we won't be tackling this right now.

If you need a workaround, you should be able to set your own component id for now:

const Button = styled.button`
  // ...
`

const Link = Button.withComponent('a').extend`
  // ...
`

Link.styledComponentId = `${Button.styledComponentId}_Link`;

This might work, but I haven't tried it yet.

Actually, this won't work because we need to use the ID to create a ComponentStyle instance.

But this makes me think. We should be able to add a workaround in SC right now:

• https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L219
• https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L211

Just by taking the componentId and modifying it during runtime, when extend or withComponent is called.

cc @mxstbr: Should I open a detailed issue for this on the styled-components repo for someone to pick up?

[mxstbr]

Sure

[kitten]

@mxstbr styled-components/styled-components#1031

@neoziro If you'd still like to pick it up, here it is :)

[gregberge]

@philpl thanks I will take a look as soon as possible!

[gregberge]

This PR should fix it styled-components/styled-components#1044

[pdeszynski]

@neoziro @philpl Is it already in the latest release? I have similar issue when using babel plugin 1.2.0 and styled components 2.1.2 also with ssr: true. I'm getting this issue only when exporting styled component as default and using className prop, for example, this doesn't work:

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

class Contact extends React.Component {
  static propTypes = {
    className: PropTypes.string.isRequired,
  };

  render() {
    const { className } = this.props;
    return (
      <div className={className}>
        <h1>
          Title
        </h1>
        <p>content</p>
      </div>
    );
  }
}

export default styled(Contact)`
  color: black;
`;

and gives diff in class names:

 (client) <div class="Contact___default-s10ewv4h-...
 (server)<div class="Contact-s10ewv4h-0 etIOKa"... 

But just assigning it to a variable will work correctly:

const StyledContact = styled(Contact)`
   color: black;
`;

export default StyledContact;

[gregberge]

@piteer1 I think it's a bug. But I recommend you to assign a variable first to have a correct displayName in React debugging tools.

[rtymchyk]

@piteer1 ☝️ I started to name exports to get around the error.

[mxstbr]

This sounds like a bug @piteer1, would you mind submitting that code as a failing test as a PR so we can reproduce & fix it? Thanks!

[pdeszynski]

@mxstbr What's the expected displayName for a component in that case? With __default or without it?