エラー調査：nuxt.jsでscssを使おうとしたら時期が悪かった件 #Nuxt

想定読者

Nuxt.js SCSS などで検索してきた人
下記エラーメッセージで検索してきた人

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/xxx/node_modules/sass-loader/dist/index.js:25:24)

下記エラーメッセージで検索してきた人

node: ../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

はじめに

この記事は、「Nuxt.jsで」「SCSSを使いたい」と考える人に向けて記載します
現在こちらの環境構築時に結構な確率でつまづくと思われます
- 私は3～4時間ほど溶けました
もしあなたがこの対象であれば、この記事は力になるかもしれません
なお、私はyarnコマンドにて動作を確認しております
- npmコマンドは試していないため、間違いがあれば適宜修正してください

解決までの手順（解説は下でします）

１．SCSSの動作確認ができる環境を用意

[nuxt.config.js]に下記を記載

css: [
  { src: '~/assets/sass/app.scss', lang: 'scss' },
],

assetsフォルダ配下に[sass]フォルダを作成し、[app.scss]を作成
[app.scss]に下記を記載

body {
    background-color: #00F;
}

なお、scssを記述して動作確認できるならこちら以外でも問題ありません

２．Dart-Sassと最新のsass-loaderの組み合わせ

下記を実行
動かなければ次の項へ

# yarnの場合
$ yarn add -D sass fibers sass-loader
$ yarn dev

# npmの場合
$ npm install sass fibers sass-loader
$ npm run dev

３．Dart-Sassとsass-loader@10.X.Xの組み合わせ

下記を実行
動かなければ次の項へ

# yarnの場合
$ yarn remove sass fibers sass-loader
$ yarn add -D sass fibers sass-loader@^10.x.x
$ yarn dev

# npmの場合
$ npm uninstall sass fibers sass-loader
$ npm install sass fibers sass-loader@^10.x.x
$ npm run dev

４．Node-Sassとsass-loaderr@10.X.Xの組み合わせ

下記を実行
動かなければ次の項へ

※私はこちらで動きました

# yarnの場合
$ yarn remove sass fibers sass-loader
$ yarn add -D node-sass sass-loader@^10.x.x
$ yarn dev

# npmの場合
$ npm uninstall sass fibers sass-loader
$ npm install node-sass sass-loader@^10.x.x
$ npm run dev

５．動かなかった場合の後始末

下記を実行（後始末）
ここまでで動かなければ別の要因と思われます。力になれずすみません

# yarnの場合
$ yarn remove node-sass sass-loader

# npmの場合
$ npm uninstall node-sass sass-loader

解説

１．scssの動作確認ができる環境を用意

scssの動作確認用の環境を用意します
手っ取り早くNuxt.jsアプリの全てのVueに対してscssを適用しています
そのため、yarn devが実行され次第、scssが使えなければエラーを吐きます
scssが使えるようになりましたら、こちらの記述は消してもらえればと思います

２．Dart-Sassと最新のsass-loaderの組み合わせ

Nuxt.jsでScssを使う際、Sassを使用します。これには下記の種類があります
- Dart-Sass
- Node-Sass
- Lib-Sass
そしてこのうち、Dart-Sassが公式で推奨され、Node-SassとLib-Sassは非推奨です
ですのでまず初めに、Dart-Sassを使用する方法を試しております。
Dart-Sassを使用する場合、下記パッケージが必要となります
- sass
- fibers
- sass-loader
そして本項のコマンドを実行すると、私の環境では下記エラーが発生します

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/xxx/node_modules/sass-loader/dist/index.js:25:24)

原因はsass-loaderのVer.11以上の使用に、webpackのVer.5以上が必要なためです
2021年6月現在、sass-loaderの最新Ver.は12.1.0です。
また現在nuxt.jsアプリをcreate nuxt-appで作成した際のwebpackはVer.4以下です
そのため上記エラーが発生します
これを回避するために、次の項ではsass-loaderのバージョンを下げています

３．Dart-Sassとsass-loader@10.X.Xの組み合わせ

ではsass-loaderをVer.10以下で用意するとどうでしょうか
私の環境では下記のエラーが発生します

node: ../src/coroutine.cc:134: void* find_thread_id_key(void*): Assertion `thread_id_key != 0x7777' failed.
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

これは、fibersを使用するのにnode.jsのVer.16が対応していないためです
もしnode.jsがVer.15以下であれば、こちらのコマンドでエラーが発生しない想定です
- Dart-Sassが使えたなら、追加で設定が必要かもしれません。検索推奨（私は試せてないので…）
エラーが発生し、node.jsのVer.を下げられないのであれば、Dart-Sassを諦めます
- もし諦めなくて済む方法があれば知りたい……
次の項では、Dart-SassではなくNode-Sassを使用します

４．Node-Sassとsass-loaderr@10.X.Xの組み合わせ

Node-Sassによるscssの利用に必要なのは以下の通りです
- node-sass
- sass-loader
こちらのコマンドを実行すれば、おそらく皆使えるようになる想定です
ただし、いずれDart-Sassに乗り換える作業が発生すると思われます
Dart-SassとNode-Sassでは一部構文が異なるので、早めにDart-Sassに移行したいですね
もしもここまでで解決しない場合は、私では力になれません。申し訳ないです

参考にしたサイト

おわりに

私が昨日エラー解決までに得た情報を１つにまとめました。いかがでしたでしょうか。
はやくDart-Sassを使用できたらと思います。非推奨設定なの気持ちわるい！
ではでは、皆様のお力になれれば幸いです。