From 2221b63723b4fb2b1de31284762e2f4104ee2676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 21:10:27 -0400
Subject: [PATCH] Don't warn for casing if it's a custom element (#21156)

This replicates what we do on the client.
---
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 6 +++++-
 packages/react-dom/src/server/ReactPartialRenderer.js       | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index ae7f80f045fe9..2a034963f48af 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1211,7 +1211,11 @@ export function pushStartInstance(
       formatContext.insertionMode !== SVG_MODE &&
       formatContext.insertionMode !== MATHML_MODE
     ) {
-      if (type.toLowerCase() !== type) {
+      if (
+        type.indexOf('-') === -1 &&
+        typeof props.is !== 'string' &&
+        type.toLowerCase() !== type
+      ) {
         console.error(
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 92cd79fde30c0..82296a933775c 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1331,11 +1331,14 @@ class ReactDOMServerRenderer {
       namespace = getIntrinsicNamespace(tag);
     }
 
+    let props = element.props;
+
     if (__DEV__) {
       if (namespace === HTML_NAMESPACE) {
+        const isCustomComponent = isCustomComponentFn(tag, props);
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
-        if (tag.toLowerCase() !== element.type) {
+        if (!isCustomComponent && tag.toLowerCase() !== element.type) {
           console.error(
             '<%s /> is using incorrect casing. ' +
               'Use PascalCase for React components, ' +
@@ -1348,7 +1351,6 @@ class ReactDOMServerRenderer {
 
     validateDangerousTag(tag);
 
-    let props = element.props;
     if (tag === 'input') {
       if (__DEV__) {
         checkControlledValueProps('input', props);