親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。
トップ > バージョンアップ > node.jsのバージョンアップによりNode Sassエラーの発生

node.jsのバージョンアップによりNode Sassエラーの発生

バージョンアップ npm Vue.js Nuxt Sass webpack

エラーの発生契機

エラーの種類は以下

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (108)

node.jsのバージョンアップで発生するエラーになると思います。
私の場合はnode.jsを2023年7月時点の最新である18.7.0にバージョンアップした時に発生しました。

解消方法1

とりあえずNode Sassのバージョンが合っていないようなので、node-sassとsass-loaderのバージョンを最新に変えてみました。
package.jsonの
変更前

  "node-sass": "^4.13.0",
  "sass-loader": "^8.0.0",

変更後

  "node-sass": "^9.0.0",
  "sass-loader": "^13.3.2",

ところがこれで実行すると、以下のエラーが発生します。

Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):                            friendly-errors 20:57:17
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (~/nuxt/node_modules/sass-loader/dist/index.js:19:24)
    at ~/nuxt/node_modules/webpack/lib/NormalModule.js:316:20
    at ~/nuxt/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at ~/nuxt/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
                                                                                                                       friendly-errors 20:57:17
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

どうやら最新のsass-loaderはwebpackのバージョン5以上しか対応していないようです。
sass-loaderを10系の最新にインストールし直し

npm install -D sass-loader@10

これで実行すれば無事に起動できました。

解消方法2

以下のようにリビルドすれば治ることもあるようです。

npm rebuild node-sass