diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js index ed70f0e68eb7..5e8be3a19eb6 100644 --- a/packages/react-is/src/ReactIs.js +++ b/packages/react-is/src/ReactIs.js @@ -12,6 +12,7 @@ import { REACT_CONTEXT_TYPE, REACT_ELEMENT_TYPE, + REACT_LEGACY_ELEMENT_TYPE, REACT_FORWARD_REF_TYPE, REACT_FRAGMENT_TYPE, REACT_LAZY_TYPE, @@ -42,6 +43,7 @@ export function typeOf(object: any): mixed { const $$typeof = object.$$typeof; switch ($$typeof) { case REACT_ELEMENT_TYPE: + case REACT_LEGACY_ELEMENT_TYPE: const type = object.type; switch (type) { @@ -140,7 +142,8 @@ export function isElement(object: any): boolean { return ( typeof object === 'object' && object !== null && - object.$$typeof === REACT_ELEMENT_TYPE + (object.$$typeof === REACT_ELEMENT_TYPE || + object.$$typeof === REACT_LEGACY_ELEMENT_TYPE) ); } export function isForwardRef(object: any): boolean { diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js index f9d9dc923cc2..6f992a2c63be 100644 --- a/packages/react-is/src/__tests__/ReactIs-test.js +++ b/packages/react-is/src/__tests__/ReactIs-test.js @@ -13,6 +13,7 @@ let React; let ReactDOM; let ReactIs; let SuspenseList; +let ReactSymbols; describe('ReactIs', () => { beforeEach(() => { @@ -21,6 +22,7 @@ describe('ReactIs', () => { React = require('react'); ReactDOM = require('react-dom'); ReactIs = require('react-is'); + ReactSymbols = require('shared/ReactSymbols'); if (gate(flags => flags.enableSuspenseList)) { SuspenseList = React.unstable_SuspenseList; @@ -116,6 +118,19 @@ describe('ReactIs', () => { expect(ReactIs.isElement()).toBe(true); }); + it('should identify legacy elements from older React versions', () => { + // Simulate a legacy React element with the old $$typeof symbol + const legacyElement = { + $$typeof: ReactSymbols.REACT_LEGACY_ELEMENT_TYPE, + type: 'div', + key: null, + ref: null, + props: {}, + }; + expect(ReactIs.isElement(legacyElement)).toBe(true); + expect(ReactIs.typeOf(legacyElement)).toBe(ReactIs.Element); + }); + it('should identify ref forwarding component', () => { const RefForwardingComponent = React.forwardRef((props, ref) => null); expect(ReactIs.isValidElementType(RefForwardingComponent)).toBe(true);