Theme-ui: Next.js Prop `className` did not match.

[danvim]

Describe the bug
I received this error in my browser console in a Next.js application.

Warning: Prop className did not match. Server: "css-1jvcsfd-Test" Client: "css-0"

(Components with some actual styles in sx will still lack their component name after their class names, like the following:)

Warning: Prop className did not match. Server: "css-wboa0q-Test2" Client: "css-1qb7fb8"

I have read from the Rebass docs, that Emotion works out of the box and does not require additional configuration for SSR. What am I doing wrong?

The components seems to have rendered correctly for all the ThemeUI JSX files I've used sx attributes on. None of them have their component names in their class names.

To Reproduce
I have the following files:

components/Test.jsx

/** @jsx jsx */
import { jsx } from 'theme-ui'

const Test = () => (<div sx={{}}/>)

export default Test

pages/index.jsx

import React from 'react'
import Test from '../components/Test'

const index = () => (
  <Test/>
)

export default index

.babelrc

{
  "presets": [
    "next/babel"
  ]
}

I have the same _app.jsx and _document.jsx as the one in the next example folder. I have not used the withMDX() function in next.config.js

[jxnblk]

I'm not entirely sure what's happening, but can you ensure that you only have one copy of emotion installed in your app?

[danvim]

@jxnblk Does showing my package.json help?

{
  //...,
  "dependencies": {
    "@emotion/core": "^10.0.27",
    "@mdi/js": "^4.7.95",
    "@mdi/react": "^1.2.1",
    "@mdx-js/react": "^1.5.3",
    "babel-loader": "^8.0.6",
    "next": "^9.1.6",
    "next-transpile-modules": "^2.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "rebass": "^4.0.7",
    "theme-ui": "^0.2.52"
  }
}

[danvim]

@jxnblk Could I provide a minimum reproducible repo as an example? https://github.com/danvim/theme-ui-problem

[jxnblk]

I would use npm ls or yarn list to ensure that only one version of a package was installed, the package.json alone won't tell you what actually was installed

[jxnblk]

Thanks for the repo, but I'm unable to reproduce the issue you're seeing. Are you using a Windows machine, by chance?

[danvim]

@jxnblk I'm using Ubuntu 18.04.

Yarn list of theme-ui-problem: https://gist.github.com/danvim/7aaf4e0bde45909e8a0e8fed223aebd8

[danvim]

My browser is FF:

I just tested with Chrome. Apparently, the problem is only observed in Firefox. Does this mean that this essentially is a problem of Emotion?

[jxnblk]

I suspect this is related to Emotion (nothing in this library handles anything regarding SSR), but I see two @emotion/core dependencies listed in your yarn list output. Yarn tends to have issues with duplicate dependencies, so I'd suggest trying your repo without reflexbox (which you shouldn't need if you're using Theme UI)

[danvim]

@jxnblk My two dependencies from you is Rebass and Theme UI. I think reflexbox is a dependency of one of them, since I did not explicitly add reflexbox to my package.json. Would you mind taking a look at my package.json and see if there is anything wrong? Am I not allowed to use Rebass with Theme UI?

[jxnblk]

I looked at your repo, but was unable to reproduce the issue. While Rebass and Theme UI should in theory work together with no problem, there's not really a good reason to use Rebass, since Theme UI is a complete replacement for it. I can't tell why you're seeing this issue, but removing/adjusting dependencies tends to be a good way to debug things like this

[danvim]

@jxnblk Thanks, I just updated my repo with TestRebass.jsx and TestThemeUI.jsx. Both are just simple overridden Box components that shows a red text. The following are in my master branch (https://github.com/danvim/theme-ui-problem). I also have the pure-theme-ui branch with only one @emotion/core listed in yarn which also has the same behavior.

My Firefox version is 71.0, which should be the latest version.

localhost:3000/rebass. OK in Firefox.

import React from 'react'
import { Box } from 'rebass'

const TestRebass = () => (
  <Box sx={{color: '#ff0000'}}>
    Hi
  </Box>
)

export default TestRebass

---

localhost:3000/theme_ui Fails in Firefox.

/** @jsx jsx */
import { jsx, Box } from 'theme-ui'

const TestThemeUI = () => (
  <Box sx={{color: '#ff0000'}}>
    Hi
  </Box>
)

export default TestThemeUI

Only TestThemeUI is experiencing problems in Firefox. Could you think of any reason why? I'm sorry to continue bothering you since you've already said it's not a problem in Rebass or Theme UI. But I don't believe I know how to raise an issue on Emotion's repo if I don't even know what's going on behind the scene.

I did not know that Theme UI is a complete replacement of Rebass. It wasn't clear to me at first.

I'm terrible at React still, so I thank you again for your patience for following my issue.

[danvim]

@jxnblk Thanks for following up my issue. I've chatted with @Andarist from Emotion. It seems that the browser dependant regex that extracts the React component name in the browser has failed for my Firefox version and OS.

I guess I'll close this issue for now.

[danvim]

@jxnblk https://github.com/emotion-js/emotion/issues/1462#issuecomment-573073340 Referring to this comment of mine, the problem is due to the Theme UI's jsx wrapper function, which failed the original regex.

From Theme UI's dist/index.esm.js:

var jsx$1 = function jsx$$1(type, props) {
  var arguments$1 = arguments;

  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    children[_key - 2] = arguments$1[_key];
  }

  return jsx.apply(undefined, [type, parseProps(props)].concat(children));
};

By cross-checking my stack trace over on that issue, it would seem the regex for matching the component name failed to expect some other function (Theme UI's wrapper) would use the 2nd line.

@Andarist said it's an oversight in Emotion's code base, but a fix wouldn't be issued anytime soon on production. This probably affects all Firefox versions.

[Andarist]

A little correction - we might release this to production soon, need to wait for Mitchell’s opinion first though