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


## 想定読者

- `Nuxt.js SCSS` などで検索してきた人

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

```bush:
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)
```

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

```bush:
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.
```

<br><br>

## はじめに

- この記事は、「Nuxt.jsで」「SCSSを使いたい」と考える人に向けて記載します

- 現在こちらの環境構築時に結構な確率でつまづくと思われます

  - 私は3～4時間ほど溶けました

- もしあなたがこの対象であれば、この記事は力になるかもしれません

- なお、私はyarnコマンドにて動作を確認しております

  - npmコマンドは試していないため、間違いがあれば適宜修正してください

<br><br>

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

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

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

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

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

- [app.scss]に下記を記載

```scss:
body {
    background-color: #00F;
}
```

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

<br><br>

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

- 下記を実行

- 動かなければ次の項へ

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

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

```

<br><br>

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

- 下記を実行

- 動かなければ次の項へ

```bush:
# 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

```

<br><br>

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

- 下記を実行

- 動かなければ次の項へ

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

```bush:
# 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

```

<br><br>

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

- 下記を実行（後始末）

- ここまでで動かなければ別の要因と思われます。力になれずすみません

```bush:
# yarnの場合
$ yarn remove node-sass sass-loader

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

```

<br><br>

## 解説

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

- scssの動作確認用の環境を用意します

- 手っ取り早くNuxt.jsアプリの全てのVueに対してscssを適用しています

- そのため、yarn devが実行され次第、scssが使えなければエラーを吐きます

- scssが使えるようになりましたら、こちらの記述は消してもらえればと思います

<br><br>

### ２．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

- そして本項のコマンドを実行すると、私の環境では下記エラーが発生します

```bush:
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`のバージョンを下げています

<br><br>

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

- では`sass-loader`をVer.10以下で用意するとどうでしょうか

- 私の環境では下記のエラーが発生します

```bush:
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を使用します

<br><br>

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

- Node-Sassによるscssの利用に必要なのは以下の通りです

  - node-sass
  - sass-loader

- こちらのコマンドを実行すれば、おそらく皆使えるようになる想定です

- ただし、いずれDart-Sassに乗り換える作業が発生すると思われます

- Dart-SassとNode-Sassでは一部構文が異なるので、早めにDart-Sassに移行したいですね

- もしもここまでで解決しない場合は、私では力になれません。申し訳ないです

<br><br>


## 参考にしたサイト

- [Nuxt.jsのプロジェクトを作成してSCSSを導入するまで](https://www.suzu6.net/posts/173-nuxt-scss/)

- [【Nuxt.js】Sassのバージョンに注意！](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91sass%e3%81%ae%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%81%ab%e6%b3%a8%e6%84%8f%ef%bc%81/)

- [Nuxt.jsプロジェクトでDart Sassを使う](https://qiita.com/kimulaco/items/8a8d36136cc7d36a768b)

- [node-sassがDeprecatedになるとのことでNuxt.jsのsassをアップデートした](https://qiita.com/n0bisuke/items/123a69ba5940f11404aa)

- [Nuxt.jsでscss導入しようとしたらエラッた](https://qiita.com/yamaki_777/items/ac5923eeb7d12781530a)

- [Assertion failed: (thread_id key != 0x7777), function find thread_id key, file ../src/coroutine.ccエラーの解決策](https://snow-cat.net/?p=1000)

- [TypeError: this.getOptions is not a function](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)

<br><br>

## おわりに

- 私が昨日エラー解決までに得た情報を１つにまとめました。いかがでしたでしょうか。

- はやくDart-Sassを使用できたらと思います。非推奨設定なの気持ちわるい！

- ではでは、皆様のお力になれれば幸いです。

<br><br>