(今更ですが)Ionic5から6へのアップデート #ionic

個人開発したアプリをメンテナンスしておらず、Ionicがv5のままでした。
現在Ionicはv7が最新です。最新にするために、一旦v5からv6へアップデートします。

環境

ライブラリ	旧バージョン	新バージョン
@ionic/core	5.3.4	6.7.5
@ionic/react	5.3.4	6.7.5
react	16.13.1	17.0.2
react-router	5.2.0	5.2.0(v6にはしない)

アップデート手順

公式サイトに手順が掲載されています。

Updating from Ionic 5 to 6

Reactのアップデート

Ionic6はReact17+をサポートしているとのことで、17にアップデートします。

npm install react@17 react-dom@17

Ionicのアップデート

npm install @ionic/react@6 @ionic/react-router@6 @ionic/core@6

設定ファイルの編集

testフィールドを更新して、transformIgnorePatternsを含めます。

package.json

scripts": {
  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
  //省略
}

App.tsxの編集

setupConfigをsetupIonicReactに置き換えます。

App.tsx

import { setupIonicReact } from '@ionic/react';
//省略

setupIonicReact({
  mode: 'md'
});

コントローラのインポート部分の編集

@ionic/coreから@ionic/core/componentsに更新します。

コードの修正

変更のあるコンポーネントを使用している場合に、コードを編集します。

Updating Your Code

私の場合は、以下の編集をしました。

Datetime

自動でローカライズしてくれるようです。
displayFormat、displayTimezone、pickerFormatを削除しました。

<IonDatetime
  className='ion-text-center'
- displayTimezone='Asia/Tokyo'
- displayFormat='YYYY年MM月DD日'
+ presentation="month-year"
  value={hoge_date}
  placeholder='Select Date'
- onIonChange={(e) => setDiagnosisDate(e.detail.value)}
+ onIonChange={(e) => setDiagnosisDate(event.detail.value.toString())}
/>

Modal

cssClassプロパティが無くなっていました。

<IonModal
  isOpen={show_modal}
- cssClass='modal-tag'
+ className='modal-tag'
  onDidDismiss={() => {setShowModalEdit(false)}}
>

アップデート後、無事に動作しました。
次はv7へのアップデートです…！

react-routerもv5からv6で大幅な変更があるようです。
そちらも対応していきます。