(client) ss="user-button sc-bdVaJa hJPaNh" data-r (server) ss="user-button sc-bwzfXH eerwGk" data-r

describe： server side render throw below error when use extend:

styleComponentCode:

// button component

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

// 暴露行为 onClick
class Button extends React.Component {

  constructor(props) {
    super(props);
  }

  click() {
    this.props.onClick();
  }

  render() {
    const {
      className,
      onClick,
      children
    } = this.props;

    return (
      <div className={className} onClick={() => onClick()}>
        {children}
      </div>
    );
  }
}

// button style component

export const DefaultButton = styled(Button)`
  font-size:14px;
  background-color: ${props => (props.disable ? '#d7d7d7' : '#f60')};
  padding: 8px 0;
  border: 0;
  width: ${props => (props.size ? Size[props.size] : '240px')};
  text-align: center;
  color: #fff;
  border-radius: 4px;
  &:hover{
    ${
      props => defauHoverFunc(props)
    }
  }
`;

// use extend to extranl button

export const DottedButton = DefaultButton.extend`
  background-color: inherit;
  border: 1px solid ${props => (props.disable ? '#d7d7d7' : '#f60')};
  color: ${props => (props.disable ? '#d7d7d7' : '#f60')};
  &:hover{
    ${
      props => dotHoverFunc(props)
    }
  }
`;

run env:

“styled-components”: “^2.1.0” “next”: “latest”, “react”: “15.6.1”, “react-dom”: “15.6.1”,

[braska]

I have same issue and I realized that error occurs in case of re-requiring compiled entrypoint (src/serverRender.jsx, for example).

In production environment src/serverRender.jsx is required once (on boot) in index.js. But in dev environment it’s necessary re-require src/serverRender.jsx after each modification in sources.

I prepared demo application to reproduce issue: https://github.com/braska/styled-components-ssr-issue-demo

I have tried to add console.log(identifiers); to 73 line in node_modules/styled-components/lib/models/StyledComponent.js (https://github.com/styled-components/styled-components/blob/master/src/models/StyledComponent.js#L33) to determinate why server side environment generate wrong class names. I got unexpected results. See server console output:

--- Run app ---
webpack built 6b5796cb7bffd02ff59a in 3213ms

--- Open page in browser ---
{ app__Button: 1 }


--- Modify src/app.jsx ---
• Compiling...
webpack building...
✓ Compilation succeeded (850ms)

webpack built 8e0df5bae5184d86db97 in 850ms
{ app__Button: 2 }

Problem is that app__Button field contains 2 now. But in browser this field always contains 1.

[wmertens]

For example, the initial HTML has this comment in the generated styles:

/* sc-component-id: Page__PageWrapper-gxjOOq */
.Page__PageWrapper-gxjOOq {}

but React complains that

 (client) ="Page__PageWrapper-bnywRW caKErI" data-
 (server) ="Page__PageWrapper-gxjOOq kDpMb" data-r

How can I troubleshoot the rehydration?

Note that I’m running in hot reload mode on server and client, but doing SSR. Somehow this must be related, because when I run the production build, I don’t get the error (but not sure if React outputs the error then)