「node-sass」モジュールのエラー

「node-sass」はNode.js環境でSASS(効率的なCSSの記述方法)を使えるようにするモジュールです。

「node-sass」でエラーが出るパターンは2つあるみたいです。

npm i --save-dev node-sass@8

「postcss-loader」モジュールのエラー

「postcss-loader」はWebPack上でPostCSSを使うモジュールのようで、NuxtもWebPackを使ってるのでNuxtでPostCSSを使えるようにするみたいです。

PostCSSが何かは全然分かっていませんが、autoprefixer(ベンダープレフィクスを自動で追加する機能)のみ明示して使っています。

「postcss-loader」でエラーが出るのはWebPackのバージョンの問題です。

You need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.

公式によると、WebPackがv5なら最新版を、v4ならv4を使えとありました。

Nuxt v2をインストールするとWebPackはv4.46.0になっていたので「postcss-loader」v4を使えばいいようです。

npm i --save-dev postcss-loader@4

もしv5になっていたら最新版を使ってください。

「sass-loader」モジュールのエラー

「sass-loader」は「node-sass」を使ってSASSの読み込みを行うモジュール…でいいのかな。

公式では確認できませんでしたが(書いてる？)、こちらもWebPackとのバージョン問題があるようで、モジュールをインストールしようとするとこんな↓感じのエラーが出て失敗します。

npm ERR! peer webpack@"^5.0.0" from sass-loader@13.3.2

バージョンを下げていってもこんな↓感じで、

npm ERR! peer webpack@"^5.0.0" from sass-loader@12.6.0
npm ERR! peer webpack@"^5.0.0" from sass-loader@11.1.1

v10でようやくインストールができました。

npm i --save-dev sass-loader@10

「@nuxtjs/google-adsense」モジュールのエラー

これはたぶん一時的なエラーなんじゃないかと思います。

執筆時点で、「@nuxtjs/google-adsense」はv2.1.0がインストールされます。 このまま起動すると、こんな↓感じになって起動にこけます。

Error: Template not found:

これまでの傾向的にv2以降でWebPackの要求バージョンかと思ったら公式には特に記載がなく(ないよね？)、1つ前と思われるv2.0.0をインストールすると動きました。 WebPackどうのうではなく、v2.1.0固有のトラブルの可能性がありそう。

なので、v2.0.0固定でインストール↓するか、

npm i @nuxtjs/google-adsense@2.0.0

v1時代の最新版をインストール↓しとけば問題なかったです。

npm i @nuxtjs/google-adsense@1

インストールするタイミングでv2.1.0以降が出ていれば改善している可能性があるので、試してみる価値はありますぜ。

まとめ？

いろいろ試した感じ、

• Nuxt.js
• Node.js
• Webpack

のいづれかのバージョンによって対応/非対応が決まっているような感じでした。

それぞれのモジュールの公式見てもNodeいくつから対応とか書いてないことも多々あるので、エラー画面でエラー吐いてるモジュールが特定できたらメジャーバージョンを下げてみるとか。 でもadsenseみたいにマイナーバージョンの変化でエラー出たりもするので臨機応変にやるしかないのかも。