diff --git a/src/isomorphic/classic/element/ReactElementValidator.js b/src/isomorphic/classic/element/ReactElementValidator.js index 3f7f717715..477c814d2f 100644 --- a/src/isomorphic/classic/element/ReactElementValidator.js +++ b/src/isomorphic/classic/element/ReactElementValidator.js @@ -25,12 +25,13 @@ var ReactElement = require('ReactElement'); var checkReactTypeSpec = require('checkReactTypeSpec'); var canDefineProperty = require('canDefineProperty'); +var getComponentName = require('getComponentName'); var getIteratorFn = require('getIteratorFn'); var warning = require('warning'); function getDeclarationErrorAddendum() { if (ReactCurrentOwner.current) { - var name = ReactCurrentOwner.current.getName(); + var name = getComponentName(ReactCurrentOwner.current); if (name) { return ' Check the render method of `' + name + '`.'; } @@ -94,7 +95,7 @@ function validateExplicitKey(element, parentType) { element._owner !== ReactCurrentOwner.current) { // Give the component that originally created this child. childOwner = - ` It was passed a child from ${element._owner.getName()}.`; + ` It was passed a child from ${getComponentName(element._owner)}.`; } warning( diff --git a/src/isomorphic/hooks/ReactComponentTreeHook.js b/src/isomorphic/hooks/ReactComponentTreeHook.js index cfae3b6401..75292cbfeb 100644 --- a/src/isomorphic/hooks/ReactComponentTreeHook.js +++ b/src/isomorphic/hooks/ReactComponentTreeHook.js @@ -14,6 +14,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner'); +var getComponentName = require('getComponentName'); var invariant = require('invariant'); var warning = require('warning'); @@ -310,7 +311,7 @@ var ReactComponentTreeHook = { info += describeComponentFrame( name, topElement._source, - owner && owner.getName() + owner && getComponentName(owner) ); } diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index 81c5319959..4843ed0dac 100644 --- a/src/renderers/dom/shared/CSSPropertyOperations.js +++ b/src/renderers/dom/shared/CSSPropertyOperations.js @@ -17,6 +17,7 @@ var ReactInstrumentation = require('ReactInstrumentation'); var camelizeStyleName = require('camelizeStyleName'); var dangerousStyleValue = require('dangerousStyleValue'); +var getComponentName = require('getComponentName'); var hyphenateStyleName = require('hyphenateStyleName'); var memoizeStringOnly = require('memoizeStringOnly'); var warning = require('warning'); @@ -114,7 +115,7 @@ if (__DEV__) { var checkRenderMessage = function(owner) { if (owner) { - var name = owner.getName(); + var name = getComponentName(owner); if (name) { return ' Check the render method of `' + name + '`.'; } diff --git a/src/renderers/dom/shared/utils/LinkedValueUtils.js b/src/renderers/dom/shared/utils/LinkedValueUtils.js index 3b6c0057f6..c2143827ad 100644 --- a/src/renderers/dom/shared/utils/LinkedValueUtils.js +++ b/src/renderers/dom/shared/utils/LinkedValueUtils.js @@ -13,6 +13,7 @@ var React = require('React'); +var getComponentName = require('getComponentName'); var invariant = require('invariant'); var warning = require('warning'); @@ -88,7 +89,7 @@ var propTypes = { var loggedTypeFailures = {}; function getDeclarationErrorAddendum(owner) { if (owner) { - var name = owner.getName(); + var name = getComponentName(owner); if (name) { return ' Check the render method of `' + name + '`.'; } diff --git a/src/renderers/dom/shared/validateDOMNesting.js b/src/renderers/dom/shared/validateDOMNesting.js index 860e37da1f..790a43e1e7 100644 --- a/src/renderers/dom/shared/validateDOMNesting.js +++ b/src/renderers/dom/shared/validateDOMNesting.js @@ -12,6 +12,7 @@ 'use strict'; var emptyFunction = require('emptyFunction'); +var getComponentName = require('getComponentName'); var warning = require('warning'); var validateDOMNesting = emptyFunction; @@ -371,16 +372,16 @@ if (__DEV__) { var UNKNOWN = '(unknown)'; var childOwnerNames = childOwners.slice(deepestCommon + 1).map( - (inst) => inst.getName() || UNKNOWN + (inst) => getComponentName(inst) || UNKNOWN ); var ancestorOwnerNames = ancestorOwners.slice(deepestCommon + 1).map( - (inst) => inst.getName() || UNKNOWN + (inst) => getComponentName(inst) || UNKNOWN ); var ownerInfo = [].concat( // If the parent and child instances have a common owner ancestor, start // with that -- otherwise we just start with the parent's owners. deepestCommon !== -1 ? - childOwners[deepestCommon].getName() || UNKNOWN : + getComponentName(childOwners[deepestCommon]) || UNKNOWN : [], ancestorOwnerNames, ancestorTag, diff --git a/src/shared/utils/getComponentName.js b/src/shared/utils/getComponentName.js new file mode 100644 index 0000000000..a562b0685d --- /dev/null +++ b/src/shared/utils/getComponentName.js @@ -0,0 +1,40 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @flow + * @providesModule getComponentName + */ + +'use strict'; + +import type { ReactInstance } from 'ReactInstanceType'; +import type { Fiber } from 'ReactFiber'; + +function getComponentName(instanceOrFiber : ReactInstance | Fiber) : string | null { + if (__DEV__) { + if (typeof instanceOrFiber.getName === 'function') { + // Stack reconciler + const instance = ((instanceOrFiber : any) : ReactInstance); + return instance.getName() || 'Component'; + } + if (typeof instanceOrFiber.tag === 'number') { + // Fiber reconciler + const fiber = ((instanceOrFiber : any) : Fiber); + const {type} = fiber; + if (typeof type === 'string') { + return type; + } + if (typeof type === 'function') { + return type.displayName || type.name || null; + } + } + } + return null; +} + +module.exports = getComponentName;