@react-icons/all-filesのv4.1.0が動かない問題に潜んでいたスコープ付きパッケージの罠

ホッケ肉厚です🐟

パッケージのアップグレード作業中に@react-icons/all-filesがエラーで動かなくなったので、その時の解決方法を紹介します。また、スコープ付きパッケージを使う際の落とし穴についても共有します。

⚠️

この記事で「スコープ付きパッケージは悪だ」と言いたい訳ではありません。

起きたことやったこと調査対応スコープ付きパッケージは必ずしも最新バージョンを追従しないまとめ

起きたこと

このブログでは表示明るさ切り替え用の太陽とか月のアイコンにreact-iconsを使用しています。これをv4.1.0にアップグレードしたところ、起動時に以下のエラーが出るようになりました。


% npm run build
:
:
(node:50080) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/shuto/Documents/Projects/Blog/my-pig/node_modules/@react-icons/all-files/package.json' of 'lib'. Please either fix that or report it to the module author
(Use `node --trace-deprecation ...` to show where the warning was created

やったこと

調査

ググったらissueとそれに対するworkaround（react-icons@4.8.1-snapshot.1）は見つけましたが、この修正自体はreact-iconsのlatestには含まれていない感じ🤔

Deprecation - Invalid Main Field

Updated May 18, 2024

もう少し情報を追ってREADMEを見ると、/all-filesにある膨大な数のファイルがインストール時間を増大させてしまうことが原因で、スコープ付きの@react-icons/all-files自体が廃止されていました。

Note This option has not had a new release for some time. More info #593

最終的にはv4.9.0で、ファイルを分割管理してモジュールを個別でimport出来るようにしたみたいです。

• react-icons/all module removed. Import the icon set with the ID. Example: import { FaSearch } from 'react-icons/fa;` 686e260

これ以上は追いませんでしたが、この辺の意見が採用されたのかな？

対応

react-icons@latestを入れ直し、


% npm remove @react-icons/all-files
% npm install @react-icons


"dependencies": {
	:
  "react-icons": "^5.3.0"
},

package.json

モジュールの参照先を変えて、


import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
:

MyFile.tsx - Before


import { FaEnvelopeOpenText } from 'react-icons/fa'
import { FaGithub } from 'react-icons/fa'
import { FaLinkedin } from 'react-icons/fa'
import { FaMastodon } from 'react-icons/fa'
import { FaTwitter } from 'react-icons/fa'
import { FaYoutube } from 'react-icons/fa'
import { FaZhihu } from 'react-icons/fa'
import { IoMoonSharp } from 'react-icons/io5'
import { IoSunnyOutline } from 'react-icons/io5'
:

MyFile.tsx - After

無事起動することが出来ました🎊


% npm run build
% npm run start
:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

スコープ付きパッケージは必ずしも最新バージョンを追従しない

スコープ付きパッケージはインストールするリソースの容量を減らせるメリットがある一方、OSSの方針によっては最新のバージョンに追従しない可能性があることが分かりました。今回はたまたまバグが原因でOSSのことを調べたので分かりましたが、きっかけが無いと気づけなかったと思います。（% npm-check --updateしてもlatestとの差分は出てこないし…）

今回のはかなりエッジケースなのでそこまで神経質になる必要はないかもしれませんが、こういう事例もあることは良い気づきになりました。

まとめ

よくあるパッケージのバージョンアップ対応をしてみたら、スコープ付きパッケージを使う際の注意点を学ぶことが出来ました。

ブログはQiitaとかZenとか使っても良いんですが、自分でメンテしているとこういうことが学べるので、面倒くさいけどメリットはありますね。