Web ComponentsのReact v19対応

グルーバルな 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 で利用する場合の型定義は次のように変更する必要がある。

1
import "react";
2

3
declare module "react" {
4
  namespace JSX {
5
    interface IntrinsicElements {
6
      "my-element": {
7
        myElementProps: string;
8
      };
9
    }
10
  }
11
}

web components ライブラリでの対応#

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

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

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

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

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