react-splideにパッチを当ててTypeScript環境でエラーが出ないようにする

Splideは軽量で使いやすいスライダーライブラリなのだが、2年前にパッタリとメンテナンスが途絶えてしまった。

TypeScript環境でのreact-splideのインポート時に モジュール '@splidejs/react-splide' の宣言ファイルが見つかりませんでした。 といったエラーが出るようになり、修正自体はライブラリに宣言ファイルの場所を示す記述を1行追加するだけなのだが、ライブラリのメンテナンスが止まっているのでとりあえずは手元で解決するしかない。

ということで、Splideが復活するまでのその場しのぎとして、ライブラリ自体にパッチを当てて問題を回避する。

必要なライブラリのインストール

参考：
https://zenn.dev/ultrasevenstar/articles/009e4450a29b9b

% yarn add --dev patch-package postinstall-postinstall

react-splideライブラリのpackage.jsonを修正

node_modulesに入っているインストール済みのライブラリの中身を直接修正する。

node_modules/@splide/react-splide/package.json

"exports": {
    ".": {
+     "types": "./dist/types/index.d.ts",
      "require": "./dist/js/react-splide.cjs.js",

typesの行を追加する。これでエラーは消えたはずだ。

修正内容をパッチ化する

当然このままだと再インストールされたときに元に戻ってしまうので、この差分をパッチ化してインストール時に自動で記述を追加するようにする。

patch-packageを使って普通だと以下のようなコマンドでパッチを作れるはずだが、今回は編集しているのがpackage.jsonなので、差分が存在しないというエラーになる。

% npx patch-package @splidejs/react-splide
patch-package 8.0.0
• Creating temporary folder
• Installing @splidejs/react-splide@0.7.12 with yarn
• Diffing your files with clean files
⁉️  Not creating patch file for package '@splidejs/react-splide'
⁉️  There don't appear to be any changes.

patch-packageのデフォルトではpackage.jsonを除外する設定になっていることが問題なので、以下のように除外対象を上書きすることでpackage.jsonへの変更もパッチ化できる。

% npx patch-package @splidejs/react-splide --exclude '^$'

自分のプロジェクトのpackage.jsonにパッチ実行の記述を追加

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "postinstall": "patch-package"
  },

これで yarn を実行してインストールし直しても自動でパッチ内容が反映されるようになる。