Zenn
🤮

Nuxt Sass サーバ起動時のエラー対処法 TypeError: this.getOptions is not a function

2021/06/23に公開
Nuxt
Sass
tech

NuxtでSassを使用するにあたって、node-sassとsass-loaderをインストールした後、サーバ起動すると、sass-loaderで以下のエラーが発生しました。

ERROR  Failed to compile with 1 errors                                     

ERROR  in ./components/Header.vue?vue&type=style&index=0&id=1a9bb128&lang=sass&scoped=true&                   

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):         

TypeError: this.getOptions is not a function
    at Object.loader (/var/www/front/node_modules/sass-loader/dist/index.js:25:24)

2つの原因

sass-loader

sass-loaderバージョン11以降は、webpackバージョン5以上が必要です。
しかし、Nuxtに入っているwebpackは、最新のNuxt（2021/06/23時点で2.15.7）でもwebpack@4.46.0が入っているため、非対応となり、エラーをゲロゲロ吐いてしまうというわけです。

sass-loaderのv11.0.0リリースを見ると、

minimum supported webpack version is 5

と書いてありますねー
https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0
なので、Nuxtでは11以前の10.2.0を必然的に指定することになるのです。

node-sass

そして、もう片方のnode-sassもバージョンに気をつけなければいけません。
node-sassのリポジトリを見てみると、Nodeのバージョン別にサポートされているnode-sassのバージョンが異なるのです。

https://github.com/sass/node-sass

めんどくさいねえ！
最新のNodeを使っているならまだしも、留意しておく必要はあるでしょう。

対処法

sass-loader@10.2.0は固定として、使っているNodeのバージョンに合わせて、node-sassをインストールしていきます。

  1. まず、インストールしたものはスッキリ削除
yarn remove node-sass sass-loader
  1. Nodeのバージョンを確認します。
node -v

自分の場合、v14.15.5でした。

  1. 上記のnode-sassのリポジトリを見て、サポートしているnode-sassのバージョンを確認します。
    自分の場合、Node 14.15.5でしたから、node-sassは4.14の最新である、4.14.1を指定します。
# 自分の場合
yarn add -D sass-loader@10.2.0 node-sass@4.14.1

# コピペ用
yarn add -D sass-loader@10.2.0 node-sass@

こうすると、正常にサーバ起動ができました。
Sassを扱う際は、バージョンに気を付けて扱いましょう。

Discussion