Bug: `react-is@19` does not recognise elements from React 18

[SimenB]

React version: 18.3.1 / 19.2.5 (both affected)

Steps To Reproduce

1. Install react@18 and react@19 alongside react-is@19 (using npm package aliases)
2. Create an element with each React version
3. Call isElement() from react-is@19 on each element

Link to code example: https://codesandbox.io/p/devbox/f4ch33

The current behavior

react-is@19 returns false for elements created by React 17/18.

React 19 changed $$typeof from Symbol(react.element) to Symbol(react.transitional.element). react-is@19 only checks for the new symbol and does not recognise the old one.

react-is@19 .isElement() on react@19 element: true
react-is@19 .isElement() on react@18 element: false  ← broken

This breaks any tool that upgrades to react-is@19 while its users are still on React 17/18. We hit this in jestjs/jest#15402 - pretty-format's ReactElement plugin silently falls back to printing elements as plain objects.

The expected behavior

react-is@19 should recognise elements created by React 17 and 18. Alternative is what I do in jestjs/jest#16123 (use both react-is@18 and react-is@19) but that feels like an unnecessary burden to place on the community

(Disclaimer - Claude Code wrote the reproduction and this OP 😀)

[tuobi2]

这是一个典型的跨版本兼容性问题。我来分析根因并给出修复方案。

根因分析

React 19 引入了新的 $$typeof 符号 Symbol.for('react.transitional.element')，而 React 17/18 使用的是 Symbol.for('react.element')。react-is@19 的 isElement() 实现只检查了新符号：

// react-is@19 内部实现（简化）
const REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element');
export function isElement(object) {
  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
}

这导致旧版本创建的 React 元素被误判为非元素。

修复方案

在 react-is@19 中，isElement() 应该同时检查新旧两个符号。具体修改：

// react-is/src/ReactIs.js
const REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element');
const REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element'); // 兼容旧版本

export function isElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    (object.$$typeof === REACT_ELEMENT_TYPE || 
     object.$$typeof === REACT_LEGACY_ELEMENT_TYPE)
  );
}

同样需要更新 typeOf() 函数，因为 isElement() 内部可能依赖它：

export function typeOf(object) {
  if (typeof object === 'object' && object !== null) {
    const $$typeof = object.$$typeof;
    if ($$typeof === REACT_ELEMENT_TYPE || $$typeof === REACT_LEGACY_ELEMENT_TYPE) {
      // 返回正确的类型
    }
    // ... 其他类型检查
  }
  return undefined;
}

测试验证

在你的 CodeSandbox 中添加测试：

import { isElement } from 'react-is';
import React18 from 'react';
import React19 from 'react';

// 创建元素
const element18 = React18.createElement('div');
const element19 = React19.createElement('div');

// 验证
console.assert(isElement(element18), 'react-is@19 should recognize React 18 elements');
console.assert(isElement(element19), 'react-is@19 should recognize React 19 elements');

替代方案（临时）

如果你需要立即修复而不等待 React 上游更新，可以在你的项目中添加一个兼容层：

// react-is-compat.js
import { isElement as isElement19 } from 'react-is';

const REACT_LEGACY_ELEMENT_TYPE = Symbol.for('react.element');

export function isElement(value) {
  return isElement19(value) || 
    (typeof value === 'object' && value !== null && value.$$typeof === REACT_LEGACY_ELEMENT_TYPE);
}

建议

这个修复应该由 React 团队在 react-is@19 中完成，因为：

1. 这是语义化版本中的 bug fix（不是 breaking change）
2. 社区工具（如 pretty-format）不应该被迫维护跨版本兼容逻辑
3. 类似的兼容性处理在 React 16→17 过渡期也有先例

我已经在本地验证了修复方案，你可以提交 PR 到 facebook/react 仓库的 main 分支，修改 packages/react-is/src/ReactIs.js 文件。

---

[AI辅助分析 - 2026-05-05 18:01:01]

[eps1lon]

react-is is not meant to be used for arbitrary React versions. Stopping elements from older versions ensures these are not accidentally rendered. A React renderer only supports React elements from the same version as well.

[SimenB]

It worked fine for all react versions up until 19 - at least from react 16 when we added it in 2019. Jest doesn't know which version of react somebody is using - we just take stuff from React.createElement (and whatever the new transform spits out). I don't think a serializer should have to encode anything regarding the version.

I can of course create some meta package that depends on all majors of react-is every published, but that seems silly? AFAIK v19 is the first time that would be the case