NextJS SSR: Prop type do not match when mapping components from array

Current behavior:

When using the css prop on elements that are mapped from an array, the following error shows up in Firefox but not in Chrome:

Warning: Prop `className` did not match. Server: "css-1443u2l" Client: "css-1inpyqe-Home"
div
withEmotionCache/<@http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1606256478140:1044:73
div
withEmotionCache/<@http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1606256478140:1044:73
Home
MyApp@http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1606256478140:11083:1
ErrorBoundary@http://localhost:3000/_next/static/chunks/main.js?ts=1606256478140:781:47
ReactDevOverlay@http://localhost:3000/_next/static/chunks/main.js?ts=1606256478140:885:20
Container@http://localhost:3000/_next/static/chunks/main.js?ts=1606256478140:12985:20
AppContainer@http://localhost:3000/_next/static/chunks/main.js?ts=1606256478140:13474:18
Root@http://localhost:3000/_next/static/chunks/main.js?ts=1606256478140:13599:18

Here is the code that causes the problems:

export default function Home() {
  return (
    <div css={{ background: "red" }}>
      {[1, 2, 3].map((_, i) => (
        <div key={i} css={{ background: "red" }} />
      ))}
    </div>
  );
}

To reproduce:

I cannot reproduce this in a CodeSandbox since this is dependent on NextJS SSR capabilities. However, I have set up a clean repository to reproduce the issue, with only the required dependencies. https://github.com/AlexanderArvidsson/emotion-bug-ssr

Please take a look at the top of the component in pages/index.tsx. The repository is not using TypeScript, but I am having the exact same problem in my TypeScript project. Only difference is that it is using twin.macro, TailwindCSS and emotion. Should not matter though since I reproduced the issue without any of those packages.

Keep in mind that this issue only occurs in Firefox for me. I’ve read around and found a couple of issues, some related to styled-components, some with ThemeUI. The closes issue I found was https://github.com/emotion-js/emotion/issues/1462#issuecomment-573073340 and https://github.com/system-ui/theme-ui/issues/538#issuecomment-573312869 but it did not help me resolve the issue.

Interestingly enough, it does not seem to happen after a production deployment to Vercel: https://bug-ssr.vercel.app/

Expected behavior:

The property should match after hydrating.

Environment information:

• NextJS version: 10.0.3
• react version: 17.0.1
• @emotion/react version: 11.1.1
• Firefox version: 83.0 (64-bit)
• Windows 10
• WSL 2, Ubuntu 18.04.4 LTS

[Andarist]

Thank you for the report - this issue only affects a dev environment (so that’s at least some upside of this). I’m looking into resolving it holistically.

[Andarist]

Thank you for double-checking my efforts! You have certainly uncovered some nice scenarios to test here:

• forwardRef (I have totally forgotten about it)
• ReactDOMServerRenderer.render - I guess you had to test a component pass directly as the root of SSR, a nice catch as well

.displayName can’t be supported at all as it won’t ever be put into stack traces, on any engine.

I will give this more thought to figure out the best solution that covers all those scenarios.