Gatsby2系からGatsby3系へアプデした際にやったことの簡易まとめ

エラーをメモとして残さずにそのままアプデしてしまったのでやったことの履歴だけ残しています。
記憶が曖昧になってしまったため少しぼやかしてる箇所もあります。

gatsby@2.29.2 から gatsby@3.8 へアプデしました。（現時点の最新バージョン）
nodeも12系 から node@15.14.0 へアプデしました。

node16系にしなかった理由はGatsby内で使用されているpost-cssのバージョンが古くエラーが解消されなかったためです。
（こちらの記事に事情を載せています。<a href="https://qiita.com/akifumiyoshimu/items/0d54297c65d329745f41">GatsbyJSにいれたnode16系で[DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at ...と怒られたのでその対応</a>）

## アプデの手順

1. yarn add gatsby@latest を最初にする。
2. gatsby develop などでとりあえず立ち上げてみる
3. プラグインの古いバージョンによる警告が表示されたのでそれらも一緒にアプデする

上記を実行した上で gatsby develop を立ち上げるとエラーが生じたので node_modules と cache を削除して再インストールしました。
全体としては警告はされなかったものの関連しているプラグインも一緒にアプデすれば解消されるかなと思います。

### gatsby-transformer-sharpに関してエラーが発生
最新版にアプデしていたのですが、 gatsby-plugin-sharp は古いままだったのでこちらも最新版にアプデして解消しました。


### tailwindでエラー発生

tailwindcss が読み込めないというエラーが表示されました。
tailwind に関する全てのプラグインと@emotion/以下略も全てのプラグインをアプデしました。
autoprefixer も @latest で入れました。

```tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```
tailwindのファイルに上以外のものもimportしていたのですが上の３つだけに絞りました。

### 既にdevelopでportが立ち上がってるから立ち上げられないみたいなことを言われる
node_modules と cache を消してエディターを再起動すればなおりました。

## コード内の変更点

### navigate()でエラーが生じた
navigate関数が存在しないとブラウザー側で怒られました。

以前は @reach/router から useNavigate を引っ張って const navigate = useNavigate() という使い方をしていました。
import { navigate } from 'gatsby' とGatsby標準ルーターに書き換えれば動きました。


## アップデート中に知った yarn outdated
各種ライブラリの現在のバージョンと欲しいバージョンとの一覧を表示してくれるとても便利なコマンドがあったので最初に使えばよかったです。

```
yarn outdated
yarn outdated v1.22.10
info Color legend : 
 "<red>"    : Major Update backward-incompatible updates 
 "<yellow>" : Minor Update backward-compatible features 
 "<green>"  : Patch Update backward-compatible bug fixes
Package                            Current        Wanted         Latest  Package Type    URL                                                                                           
@emotion/react                     11.1.2         11.4.0         11.4.0  dependencies    https://github.com/emotion-js/emotion/tree/main/packages/react                                
@firebase/app-types                0.6.1          0.6.2          0.6.2   dependencies    https://github.com/firebase/firebase-js-sdk#readme                                            
@fortawesome/free-brands-svg-icons 5.15.2         5.15.3         5.15.3  dependencies    https://fontawesome.com                                                                       
@material-ui/core                  5.0.0-alpha.19 5.0.0-alpha.38 4.11.4  dependencies    https://material-ui.com/                                                                      
@testing-library/jest-dom          5.11.9         5.14.1         5.14.1  dependencies    https://github.com/testing-library/jest-dom#readme                                            
@types/jest                        26.0.20        26.0.23        26.0.23 dependencies    https://github.com/DefinitelyTyped/DefinitelyTyped.git                                        
@types/node                        14.14.16       14.17.4        15.12.4 dependencies    https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node                     
@types/react                       17.0.0         17.0.11        17.0.11 devDependencies https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react                    
@types/react-autosuggest           10.0.1         10.1.4         10.1.4  dependencies    https://github.com/DefinitelyTyped/DefinitelyTyped.git  
...
以下略
```
のようにアプデしたいライブラリだけ選択して latest をインストしてくれます。

### 簡単にまとめてアプデする際に yarn upgrade-interactive --latest を使った
対話式にアプデできてとても時短になります。

```
? Choose which packages to update. 
 ◯ typescript                          latest  4.1.3    ❯  4.3.4    https://www.typescriptlang.org/
  
 dependencies
   name                                range   from        to       url
 ◉ @fortawesome/free-brands-svg-icons  latest  5.15.2   ❯  5.15.3   https://fontawesome.com
 ◉ @types/jest                         latest  26.0.20  ❯  26.0.23  https://github.com/DefinitelyTyped/DefinitelyTyped.git
❯◉ @types/node                         latest  14.17.4  ❯  15.12.4  https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node
 ◉ @types/react-dom                    latest  17.0.0   ❯  17.0.8   https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom
 ◉ react                               latest  16.14.0  ❯  17.0.2   https://reactjs.org/
 ◉ react-autosuggest                   latest  10.0.4   ❯  10.1.0   https://github.com/moroshko/react-autosuggest#readme
 ◉ react-dom                           latest  16.14.0  ❯  17.0.2   https://reactjs.org/
 ◉ react-typography                    latest  0.16.19  ❯  0.16.20  https://github.com/KyleAMathews/typography.js
```

## アプデして変わったこと
・develop や build の時間が短くなった
・エラーログが立ち上げた画面にわかりやすく表示されるようになった

## 頑張ってもダメっぽい。となったら node_modules を再インスト
tailwindcssとその関連プラグインをアプデした際に画像が何故か全て読み込めずにaltタグの文字列が表示されるあの状態になる現象が生じました。
途中でnode_modulesを再インストしてましたがまた消して再度インストールしたら直りました。