👷

NuxtBridge導入してみた①　最初から15回も怒られたの巻

2022/08/10に公開

JavaScript

こんにちは。今日はNuxt使いです。
お仕事のデータはNuxt2を使っております。
でも、Nuxt3にしなければならんということで、その前にNuxtBridgeを導入しようとしています。

こちら、Nuxt2,NuxtBridge、Nuxt3という段階で、できることがどのように追加（または削除）されていくかがわかりやすい表です。
NuxtBridgeは、その名の通り、２と３の橋渡しのような役目である様子。
スムーズにNuxt３に移行するために存在するやつですね。

とはいえ、Bridgeに更新するだけでも、わりと恐ろしい作業な気がします。
（いろんな記事を読んでみて、すでに恐ろしい。）
公式のガイドに従ってやっていきますが、絶対随所でつまずくと思っていて、
今回はつまずく様子をご覧いただきます。

記事は、とりあえずその時の悩みをできるだけ解決してから上げることにします。
同じように悩んでいる人の助けになれば幸いです。
なお、初心者ですので、わかんないけどやってみた的なこともちらほら出てきます。その部分は助けてください。笑

今回の問題：yarn dev　すると怒られる

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

という内容で１５回怒られた問題を解消しました。

導入手順①　「Upgrade Nuxt2」

これは、公式ガイドの手順に従っています。

まずは手順に従い、
nuxt　をnuxt-edgeに置き換え、

package.json

- "nuxt": "^2.15.7"
+ "nuxt-edge": "latest"

その後、yarn installをします。

% yarn install

ほんでもって…

インストールが完了したら、続行する前に、開発ビルドと本番ビルドの両方が期待どおりに機能していることを確認してください。

ってガイドに書いてあるので、

% yarn dev

すると…

【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.　って、すげー怒られたんだが…！

 【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
 【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
 【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
...
 【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

(repeated 15 times)

おぉん？　15回も言わんでいいし、「15回言ったったで」みたいなその態度なんや！怒

::v-deep、やめて？代わりに、:deep(<inner-selector>)にして？

要約すると、こんな風に言ってそう。で、同じことが起きている記事を検索したら、中国語の記事が一番近い状況でした。

以下、操作部分を抜粋。

たいていのscss

- ::v-deep .demo{…}
+ ::v-deep(.demo){…｝

（なんか、vはとらなくていいの？こころのこえ）

まぁ言われたとおりに、ちょっとやってみます。

いろんなscss

- ::v-deep h1{…}
+ ::v-deep(h1){…｝

以上の通りに、scssをいくつか直して、再トライ。

…

怒られなかった！うれしい！！エミュレータ通常起動！

※ターミナルの状況を記録しそこねました。すみません…
でも、大量に怒られる現象自体は解消しました。

ちなみに、vいるのかどうか問題を解決すべく、1個だけ、

いろんなscss

::deep(h1){…｝

にして再トライ。

これでも普通にできた。どっちでもいいんかい。

本記事のまとめ

問題：【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.って（めっちゃ)言われる。

答え：scssの`::v-deep h1{…}`を`::v-deep(h1){…｝`というように、セレクタやクラスを()にしまってあげる。

ではこのへんで！

今回の問題：yarn dev すると怒られる

導入手順① 「Upgrade Nuxt2」

【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. って、すげー怒られたんだが…！