グルーバルなJSX名前空間の削除

React v19では、React.JSXを優先するために、グローバルJSX名前空間が削除された。 これにより、JSXを利用する異なるライブラリとの衝突を防ぐことができる。

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript

Web components用の型定義

グローバルJSX名前空間が削除により、React v19ではweb componentsをReactで利用する場合の型定義は次のように変更する必要がある。

import "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "my-element": {
        myElementProps: string;
      };
    }
  }
}

web componentsライブラリでの対応

私が業務で開発しているweb componentsを利用したライブラリでは、次のような利用を想定してReact用の型定義を提供している。

/// <reference types="some-components/jsx" />

グローバルなJSX名前空間を利用され、React v19向けに型の変更が必要になった。

しかし、ライブラリを利用している側がすぐにReact v19に上げられるわけではなく、React v18向けの型定義を引き続き提供する必要があった。またReact v19用の型定義は、React v18までの型定義とは互換性がないため、次のように別途型定義を提供することにした。

/// <reference types="some-components/react" />