react-pixi をアップデートしたら `interactive={true}` がエラーになった話

React で Pixi.js を使う際のデファクトだった @inlet/react-pixi というライブラリが Pixi.js 公式になり、@pixi/react という名前に変わりました。 そこで @pixi/react v7.1.0 にアップデートしたところ、クリック可能な Sprite を作るための <Sprite interactive={true} /> の記述がエラーになりました。本記事では原因の調査と解決方法について書きます。

原因

@pixi/react ではコンポーネントの Prop として渡せる型は Pixi.js 本体が定義している各クラスのプロパティの型定義により決定されます。ところで Pixi.js は機能ごとに個別のパッケージに分割され実装を行っています。クリックなどのインタラクションは @pixi/events パッケージに実装されています。そして Sprite クラスの interactive プロパティは @pixi/events に実装されているため、このパッケージを import しないと interactive が参照できないというのが今回の原因となります。

解決方法

@pixi/events パッケージをインストールし、interactive を参照するコードに import "@pixi/events" を追記します

npm install @pixi/events

import "@pixi/events"

...

    <Sprite
      ...
      interactive={true}
    />