Next.js Prop `className` did not match.

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

[Andarist]

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

[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.