Don't warn for casing if it's a custom element (#21156)
This replicates what we do on the client.
Sebastian Markbåge committed
Mar 31, 2021 at 21:10 UTC
588db2e1fc1355cbd0c587a5c4ada331486fcd7a
2 files changed
+9
-3
packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+5
-1
@@ -1211,7 +1211,11 @@ export function pushStartInstance(
1211
formatContext.insertionMode !== SVG_MODE &&
1212
formatContext.insertionMode !== MATHML_MODE
1213
) {
1214
- if (type.toLowerCase() !== type) {
1214
+ if (
1215
+ type.indexOf('-') === -1 &&
1216
+ typeof props.is !== 'string' &&
1217
+ type.toLowerCase() !== type
1218
+ ) {
1219
console.error(
1220
'<%s /> is using incorrect casing. ' +
1221
'Use PascalCase for React components, ' +
packages/react-dom/src/server/ReactPartialRenderer.js
+4
-2
@@ -1331,11 +1331,14 @@ class ReactDOMServerRenderer {
1331
namespace = getIntrinsicNamespace(tag);
1332
}
1333
1334
+ let props = element.props;
1335
+
1336
if (__DEV__) {
1337
if (namespace === HTML_NAMESPACE) {
1338
+ const isCustomComponent = isCustomComponentFn(tag, props);
1339
// Should this check be gated by parent namespace? Not sure we want to
1340
// allow <SVG> or <mATH>.
1338
- if (tag.toLowerCase() !== element.type) {
1341
+ if (!isCustomComponent && tag.toLowerCase() !== element.type) {
1342
console.error(
1343
'<%s /> is using incorrect casing. ' +
1344
'Use PascalCase for React components, ' +
@@ -1348,7 +1351,6 @@ class ReactDOMServerRenderer {
1351
1352
validateDangerousTag(tag);
1353
1351
- let props = element.props;
1354
if (tag === 'input') {
1355
if (__DEV__) {
1356
checkControlledValueProps('input', props);