Nuxt 3 rc から Nuxt 3 にアップデートしたときの話

この記事は [弁護士ドットコム Advent Calendar 2022](https://qiita.com/advent-calendar/2022/bengo4com) の 1 日目の記事です。

## TL;DR
beta から使うのであれば
変化に追いつく覚悟とサボらない覚悟が必要
戒めとして残しておく

## はじめに
クラウドサインではスクラム開発を行っており、
そのプランニングにて自作のプランニングポーカーアプリをご利用いただいております。

本アプリは Nuxt 3 beta にて構成しております。
そしてこの度 Nuxt3 stable が発表 :tada:　されたので、
stable に移行した際の備忘録についてご紹介させていただければと思います。
（あとやらかしも戒めとして残します）

## 軽くアプリのご紹介

ホストが `Create room` から部屋を立てて、
![プランニングポーカーの部屋を立てる画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/5dbdc7cd-7b45-c355-28c0-1fa81023a4c3.png)

部屋を立てた後に参加者をご招待し、
![プランニングポーカーで部屋を立てた後の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/cea2edb8-94ea-b78f-a281-76a0f1651a0e.png)

プランニングポーカーを始める、という感じです。
![プランニングポーカーで立てた部屋に他のメンバーが参加している画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/f098f59f-1299-695c-2adc-dd024c73e87a.png)


## 構成
- Nuxt3 ( beta のときから使っています )
- tailwind
- pinia 0.x 系
- firebase hosting
- firebase database


## stable に移行するためにやったこと
### 1. Nuxt 3 のバージョンを上げる
※ 事前に nuxt3 beta から nuxt 3 rc へ上げております。

[Upgrade Guide](https://nuxt.com/docs/getting-started/upgrade) をみたところ、

> To upgrade Nuxt 3 to the latest release, use the nuxi upgrade command.

とあったので `npx nuxi upgrade` を実行したところ、

```diff:package.json
-    "nuxt": "^3.0.0-rc.3",
+    "nuxt": "^3.0.0-rc.14",
```

rc のままや… :thinking: 

「rc の最新に上げてから rc が取れるのかな」と思いもう一度 `npx nuxi upgrade` を実行しても変わらず…


そこで手動で以下のようにバージョンを書き換え、　`yarn install --check-files` を実行
```diff:package.json
-    "nuxt": "^3.0.0-rc.14",
+    "nuxt": "^3.0.0",
```

結果としてバージョン自体は上がり、 `yarn dev` が叩けるようになりましたが他のエラーが発生しました :cry: 

### 2. NuxtConfig (nuxt.config.ts) の修正
#### defineNuxtConfig 自体の指定
実行したところ、以下のエラーが発生しました。
```shell
 ERROR  Cannot start nuxt:  (0 , _nuxt.defineNuxtConfig) is not a function 15:35:35
  at nuxt.config.ts:7:43
  ...
```

issue を漁ったところ、 [読み込むパスを変えれば動くよという issue](https://github.com/nuxt/framework/issues/9330#issue-1464499120) を発見したので 
以下のように修正することで事なきを得ました。
```diff:nuxt.config.ts
-  import { defineNuxtConfig } from 'nuxt'
+  import { defineNuxtConfig } from 'nuxt/config'
```

今回は明示的に指定しましたが、そもそも [インポートなしで利用できる](https://nuxt.com/docs/guide/directory-structure/nuxt.config#nuxt-config-file) みたいです。

#### nuxt config の設定周り

修正して再度 `yarn dev`

postcss の設定周りで変更が合ったみたいで、 `build` のブロック内ではなく、外に書けるようになったみたいです。
そこで [Nuxt Config](https://nuxt.com/docs/api/configuration/nuxt-config/#postcss) を見つつ以下のように対処しました。
```diff:nuxt.config.ts
- build: {
-     postcss: {
-       postcssOptions: require('./postcss.config.js'),
-     }
-   }
+ build: {},
+ postcss: {
+   config: require('./postcss.config.js'),
+ }
```


終わったと思ったら次は `buildModules` ブロックででエラー発生。
[Migration のページ](https://nuxt.com/docs/migration/configuration#migration-1) を確認すると、

> Move all your buildModules into modules.

とあったので `buildModules` から `modules` に引っ越ししました。

```diff:nuxt.config.ts
- buildModules: [
-   '@vueuse/nuxt',
-   '@pinia/nuxt'
- ],
  modules: [
+   '@vueuse/nuxt',
+   '@pinia/nuxt'
    ...
  ]
```


これで終わったと思ったら次は　`env` ブロックででエラー発生。
```ts:nuxt.config.ts
env: {
    FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
    // 他にも環境設定
  },
```

ソースコードをよくよくみたら使っていなかったので削除・・・ ( やらかし① )

#### pinia の更新
設定はクリアしたので改めて `yarn dev` したところ
```shell
ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'nuxt') 16:00:25
  at module (node_modules/@pinia/nuxt/dist/module.mjs:14:21)
  ...
```

なので `yarn upgrade @pinia/nuxt` を実行。
よくよくみたら そのまんまの pinia が存在していたので削除したら解決しました… ( やらかし② )

#### dotenv の更新
改めて `yarn dev` すると dotenv でエラー
```shell
 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'srcDir') 16:07:59

  at module.exports (node_modules/@nuxtjs/dotenv/lib/module.js:9:24)
  ...
```

そもそも使っていなかったので削除 ( やらかし③ )
加えて [「直接インポートしないでね」](https://nuxt.com/docs/migration/configuration#dotenv) と記載されていたので Nuxt3 stable の設定としても良くなかったみたいです。

#### tailwind の更新
改めて `yarn dev すると`立ち上がった :tada: 
が、なんだこれは・・・

![スタイルが崩れてしまったプランニングポーカーの画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/360388c1-44c3-aed2-2a28-fd2bc727ac06.png)

スタイル周り、tailwind 周りだろうなぁと思い調査したところ `@apply` が効いていない様子でした。
![cssのapply構文が効いていないことが確認できるスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/b29e844f-e1ce-82a5-f4d4-82ad0212bec2.png)

[類似の issue](https://github.com/nuxt/framework/issues/9163) があったので、 `nuxt.config.ts` の `modules` に `@nuxtjs/tailwindcss` を追加しました。

```ts:nuxt.config.ts
export default defineNuxtConfig({
  ...
  modules: [
    ...
    '@nuxtjs/tailwindcss',
  ],
  ...
```

そして、またなのですが、よく見たら生の tailwindcss が残っていた ( やらかし④ )　のでそれを削除し、
改めて `@nuxtjs/tailwindcss` をインストールし `yarn dev` してみると…

![正常にスタイルがあたり、無事にプランニングポーカーの部屋を立てる画面が表示されたキャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34096/6a35683c-b2e7-8a79-809d-2a1a1f54fc2e.png)

動いた :tada: 
よかった・・・

## まとめ
- rc ~ stable までの変更を一気に進めたので手間取った
  - トライアンドエラー大会だった
- （当たり前ですが） beta ~ stable になるまでは変化が激しいので適宜キャッチアップしていく必要があった
- サボったのがたたった
  - beta の暫定対応だったり、とりま動いているから〜、と放置していたコードが今となって牙をむいてきました
  - `やらかし`、で検索すると「そりゃアカンやろ」というムーブが引っかかると思います
  - **みんなはサボらないようにしような**


あしたは @komtaki さんです！よろしくおねがいします！