[v4 beta] Server rendering not working

[vinpac]

Environment

Reproduction

git clone https://github.com/vinpac/test-react-custom-cms-intl/tree/styled-v4
cd test-react-custom-cms-intl
yarn
yarn dev

Steps to reproduce

1. Open localhost:3000
2. See console. It will give you a Prop 'className' did not match
3. Click on 'vagas'. The search bar will not match with the first page.

Screenshots

This doesn't happen on v3. You can check it the same repository on master branch.

[imbhargav5]

Hmm, taking a look now. Actually I am unable to run it.

[vinpac]

Strange, I couldn't replicate this check error. Is this the only error? If so, deleting the *.stories files is fine.

[kachkaev]

Looks like I'm experience the same issue in my Next.js + TypeScript app after upgrading to styled-components v4, but I can't reproduce it in an MWE I've been trying to craft myself 🤔

[kachkaev]

I still can't reproduce the bug in an MWE, but what I see is that all cases of it appear around this kind of code:

const XXX = styled.div``;
const YYY = styled(XXX)``;

// <YYY />

index.js:2178 Warning: Prop `className` did not match. Server:
"MyFile__YYY-sc-1dfk8wt-1 jxgVKZ" Client: "MyFile__XXX-sc-1dfk8wt-0 ditbzw"

The effect this produces looks exactly like @vinpac has described.

My dependencies include:

    "next": "^7.0.0-canary.12",
    "styled-components": "^4.0.0-beta.0",

    "@zeit/next-typescript": "^1.1.1-canary.3",
    "babel-plugin-styled-components": "^1.6.2",
    "@types/styled-components": "^3.0.0",

babelrc:

{
  "presets": ["next/babel", "@zeit/next-typescript/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
  ],
  "env": {
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": false, "preprocess": false }
        ]
      ]
    }
  }
}

FYI: There was a duplicate styled-components package v3 in my node_modules as it was a dependency of another package I use. However, I locked to v4 via package.json / yarn and now there is only once instance of it in yarn.lock.

  // package.json
  "resolutions": {
    "styled-components": "4.0.0-beta.0"
  },

[quantizor]

@kachkaev any chance you could post some sort of minimal reproduction repo so I can experiment?

[quantizor]

@vinpac trying to run your project and getting this error:

TypeError: e.split is not a function
    at e.localeDataScript.e (/Users/bear/code/test-react-custom-cms-intl/src/server/intl/setup.ts:28:23)

[vinpac]

@probablyup Just pushed a commit that will probably fix that.

Just enforcing that branch master is on styled-components v3 and the changes are on styled-v4 branch.

[quantizor]

ah, gotcha

[quantizor]

@vinpac hmm after looking at this, I'm not really sure why. We don't guarantee className consistency across environments unless you're using the babel plugin. Have you explored using the new babel typescript integration? https://babeljs.io/docs/en/babel-preset-typescript

[kachkaev]

@probablyup I'm using babel-preset-typescript, which is provided by @zeit/next-typescript

[kachkaev]

I was able to produce an MWE with no TypeScript involved:
https://github.com/kachkaev/styled-components-v4-ssr-mwe

What's happening is reeeeally strange though. If you yarn && yarn next on master, you'll get:

Warning: Prop `className` did not match. Server: "pages__StyledDiv2-sc-1cvwks4-1 LdUbX"
Client: "pages__StyledDiv1-sc-1cvwks4-0 ddDAFj"

You can go to another page and back and see the styles partially lost in the second div. That's the essence of the bug @vinpac has reported.

However if you remove react-apollo, react-i18next or both from packge.json and then rm -rf node_modules yarn.lock && yarn && yarn next, the bug won't reproduce any more! I have no idea how these two libraries can affect anything given that I'm not using them in the code at all 😅

I got to the MWE by deleting parts of my real app and here is the reason why those two unrelated dependencies are in package.json. Presence of both backages is a deal breaker for some reason.

This problem did not exist in my real app when I was using styled-components v3. The same here: you can downgrade it to v3 in my MWE while keeping all original dependencies and the class mismatch warning will be gone 😱

[kachkaev]

FYI: The bug is still reproducible on ^4.0.0-beta.0-2

[kachkaev]

Upgrading to next@7.0.0-canary.13 does not help either. MWE updated.

[quantizor]

If you see that -0 and -1 on the className mismatch, I think that’s because the ordering of the components in that file is changing between server and client. Usually an issue of differing configs during transpilation

[quantizor]

Or non-deterministic transpilation which is arguably worse 😐

[kachkaev]

Where do you think the error can be coming from? What is different in v4 compared to v3 that could make the bug possible?

Interestingly, the wrong class name is on the client, not on the server.

[quantizor]

I’ll keep investigating

…

On Thu, Sep 6, 2018 at 8:19 AM Alexander Kachkaev ***@***.***> wrote: Where do you think the error can be coming from? What is different in v4 compared to v3 that could make the bug possible? Interestingly, the wrong class name is on the client, not on the server. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1972 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1j6d81kO4FZqQG6aHK-Cn8Yp_J5Aks5uYSDagaJpZM4WbFY5> .

[quantizor]

I have absolutely no idea what's going on here. If I remove a dependency like react-apollo, it goes away. If I add it back, it comes back. So it's deterministically interdeterministic. This is really f*ing bizarre.

[quantizor]

Okay this has been a fun debugging experience... multiple versions of hoist-non-react-statics were being used and they conflict with each other.

[quantizor]

Adding this made it go away:

"resolutions": {
    "hoist-non-react-statics": "3.0.0"
}

[kachkaev]

@probablyup OMG you are a star!!! 🌟 🎉 I'll check this tomorrow on on the weekend – had to revert upgrading to v4 for now.

[vinpac]

@probablyup Indeed, putting "hoist-non-react-statics": "3.0.0" on resolutions solves it.

[quantizor]

Going to leave this open until the PRs against next are merged

[vinpac]

Thank you for your help!

[quantizor]

Ok looks like updates are out for both versions of next, gonna close this. Thanks @timneutkens!

[kachkaev]

Thank you for investigating this @probablyup! 🚀 I'm so keen to try styled-components v4 with Next 7.0.0-canary.14, just need to get back home for that 😅