はじめに

SharePoint Framework で以前作ったアプリを最新の SharePoint Framework 開発環境で bundle しようとしたところエラーが出て bundle が失敗しました。
上記のように以前作ったアプリを最新バージョンに対応させるということは度々発生すると思うので、基本的なバージョンアップ方法について docs をもとに試してみました。

docs
SharePoint Framework のパッケージの更新

bundle 時に発生したエラー

もともと SPFx v1.10.0 で実装していた Web パーツを SPFx v1.12.1 環境で「gulp bundle –ship」したところ、以下のエラーが発生しました。

上記のエラーメッセージをもとにネットで検索してみると、パッケージが古いため最新化しましょうといったものが見つかったため、なるほど SPFx v1.12.0 環境で SPFx v1.10.0 の Web パーツを扱ったために諸々バージョンが合わなくてエラーになったのだなと分かり、パッケージの最新化を行うことにしました。

古いパッケージを見つける

実際に今の環境でどのパッケージが古くなっているのかを調べるために、以下のコマンドを実行します。

npm の場合

yarn の場合

私は yarn 好きなので、yarn での実行結果を記載します。

テキストで書くと分かりづらいのですが、実際には下図の通り色が付いて表示されるため古いパッケージがひと目でわかります。

古いパッケージを最新化する

古いパッケージを最新化するには以下のコマンドを実行します。

npm の場合

yarn の場合

以下、yarn での実行結果です。

最後まで書くと長いので省略しますが、上記の通り処理が進んでパッケージが最新化されます。

これを古いパッケージの数分だけ繰り返していくことになります。
すべて最新化が完了すると、「yarn outdated」を実行しても何も表示されなくなります。

これでスッキリしました！

その後、改めて「gulp bundle –ship」を実行したところ別のエラーが発生しました。

パッケージ更新後に発生するエラーの対応

パッケージを更新したことで、ソースコードや各種設定が前のバージョンのパッケージに合わせてコーディングされているため最新パッケージではエラーになる場合があります。

私が今回遭遇したエラーはこちらでした。

このエラーは、tslint の no-use-before-declare というルールが TypeScript 2.9 以降では非対応となったために出ているもののようです。
SharePoint Framework のパッケージを v1.12.1 にアップグレードしたことで TypeScript のバージョンが変わったため、前バージョンでは有効だったルールが使えなくなったということですね。

こちらについては、tslint.json ファイルを開いて no-use-before-declare の行（以下のソースの 20 行目）を削除することで解消しました。

その後、「gulp bundle –ship」も「gulp package-solution –ship」も無事完了しました。

しかし、、、パッケージの数が多いのでひとずつ実行するのは大変ですね。
まとめて実行できるやり方があればありがたいところですが、今の私はその方法を知らないのでここまでにしたいと思います。