Generated class labels in dev do not match server render causing a react error

[nathanmarks]

EDIT: the main reason for this happening in my case is that the components in the package are anonymous functions inside forwardRef and the name cannot be resolved for other purposes as well such as react dev tools locally (fixing that resolves the issue as the client and server both pull the correct name from the stack). While this should be fixed, I still think a way to disable the functionality below would be useful should anything similar arise again.

---

In local dev, where we get react errors for client/server mismatch, emotion is causing issues with some of our components.

We have a number of components in a separate package, and due to what I presume to be some slight differences in our server build and our client build, and how the stack traces are built on the server, we end up with a classname mismatch due to this code:

emotion/packages/react/src/emotion-element.js

Lines 42 to 57 in 1ee3400

	if (process.env.NODE_ENV !== 'production') {
	const error = new Error()
	if (error.stack) {
	// chrome
	let match = error.stack.match(
	/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /
	)
	if (!match) {
	// safari and firefox
	match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/)
	}
	if (match) {
	newProps[labelPropName] = sanitizeIdentifier(match[1])
	}
	}
	}

I put a breakpoint on the code linked above to see what's going on. Here's a client stacktrace example for a problem component:

Here's the stack on the server:

So the server generates a class name with -Object at the end, and the client doesn't attach a label at all.

Until this is resolved, is there any way to disable this functionality? This is preventing us from exposing other client server render mismatch errors easily

[fracture91]

The root cause is probably covered in #2134 / #2136 - but I agree a feature toggle would be nice