Node.js v21 で Sass がエラーになってしまう場合

最近、Node.js の最新版がバージョン 21.0.0 にアップデートされましたが、 それと最新版の Sass を組み合わせると、Sass でエラーが発生してしまうようです。 最近アップデートされたばかりということもあり、調べても情報が少なかったので誰かのために軽くまとめておきます。

環境とエラーの内容

環境

今後のバージョンアップで修正されるかもしれませんので、バージョン番号を記載しておきます。

Node.js 21.0.0
Sass 1.69.3
1.69.4
※ ちゃんと調べてません。

2023/10/29 追記：
Sass 1.69.5 で Node.js v21 に対応されたので、Sass 1.69.5 以降では発生しません。

エラーの内容

内容はこちら。 エラーメッセージ的には ua.indexOf() が見つからないということみたいですが、 ざっと調べたところによると原因は、 変数 ua の中身である navigator.userAgent が取得できず、 ua が undefined になってしまっているということのようです。

エラー内容
C:\Users\Test\demo\node_modules\sass\sass.dart.js:116832
    if (ua.indexOf("DumpRenderTree") >= 0) return hooks;
           ^

TypeError: Cannot read properties of undefined (reading 'indexOf')
    at C:\Users\Test\demo\node_modules\sass\sass.dart.js:116832:12
    at Object.applyHooksTransformer (C:\Users\Test\demo\node_modules\sass\sass.dart.js:1863:14)
    at Object.initHooks (C:\Users\Test\demo\node_modules\sass\sass.dart.js:1843:251)
    at Object.initNativeDispatchContinue (C:\Users\Test\demo\node_modules\sass\sass.dart.js:1809:9)
    at Object.initNativeDispatch (C:\Users\Test\demo\node_modules\sass\sass.dart.js:1803:9)
    at Object.getNativeInterceptor (C:\Users\Test\demo\node_modules\sass\sass.dart.js:29308:13)
    at Object.getInterceptor$x (C:\Users\Test\demo\node_modules\sass\sass.dart.js:29569:16)
    at Object.set$compile$x (C:\Users\Test\demo\node_modules\sass\sass.dart.js:29636:16)
    at Object.main (C:\Users\Test\demo\node_modules\sass\sass.dart.js:24401:9)
    at main2 (C:\Users\Test\demo\node_modules\sass\sass.dart.js:26210:9)

Node.js v21.0.0

対策

現状では、Node.js を 20.8.1 にダウングレードするしかなさそうです。 Sass の GitHub 上では対応が議論されているようなので、 Node.js か Sass のどちらかで対応されるまで待ちましょう。

2023/10/29 追記：
Sass 1.69.5 で Node.js v21 に対応されたので、Sass 1.69.5 以降にバージョンアップすると動くようになります。

参考サイト

関連記事

Sass のソースマップの使い方

JavaScript のソースマップがあまりにも便利なので、もはやソースマップ無しでは開発がツライという感じなのですが、最近ふと Sass にもソースマップがあったことを思い出しました。ということで Sass でソースマップを使う方法をまとめておきます。いまさら感がとんでもなくスゴイですが、誰かのお役に立てれば幸いです ...
2023/04/18 続きを読む

Sass の使い方（その１：概要）

CSS自体は楽しいものですが、長く運用していると、CSSファイルは巨大化し、複雑になり、メンテナンスが難しくなりがちです。CSSファイルは誰もメンテナンスできないなんていうプロジェクトに何度か遭遇したことがあります。巨大で複雑なCSSファイルをメンテナンスできるようにするには、どうすればよいでしょうか？そこで登場するの ...
2021/04/23 続きを読む

Node.js と npm の使い方（その１：概要）

最近の Web 界隈では、UX を高めるために、UI を JavaScript でガリガリ実装するというのが普通になってます。フロントエンドエンジニアなんていう職種が生まれるほど、この界隈は活発です。そこでフロントエンド開発でほぼ必須となるであろう Node.js と npm について少しまとめてみます。今更感がすごい ...
2017/12/24 続きを読む

記事検索

最新記事

Node.js v21 で Sass がエラーになってしまう場合
2023/10/21
Microsoft Edge のページの角の丸みを元に戻す方法
2023/08/28
React の使い方
2023/08/17
Axios の使い方
2023/08/02
Fetch API の使い方
2023/08/01

人気記事

WSL（Windows Subsystem for Linux）の使い方
2021/08/22
WSL 2 の環境をバックアップ＆複製する方法
2023/02/06
Windows の Docker 環境を高速化する方法
2023/01/30
Docker で Apache + PHP コンテナを作る方法
2023/02/20
Windows ターミナルで SSH 接続する方法
2022/08/03

RSSフィード

feed RSS 2.0

お知らせ

  • 2023/10/21
    ブログ記事「Node.js v21 で Sass がエラーになってしまう場合」を追加しました。
  • 2023/10/01
    ツール「ダミー画像ジェネレーター」の「文字設定」の「エフェクト」に「塗りつぶし」 を追加しました。
    文字が見にくい場合に見やすくすることができます。
  • 2023/10/01
    ツール「テキスト画像ジェネレーター」の公開を終了しました。
    お問い合わせ等がありましたらこちらよりお願いいたします。
  • 2023/09/24
    ツール「caseスタイル変換ツール」の「変換結果」に「SNAKE_CASE」、「KEBAB-CASE」 を追加しました。
    大文字のスネークケースとケバブケースに変換できます。
  • 2023/09/16
    ツール「caseスタイル変換ツール」で「camelCase / PascalCase」 から 「snake_case」、「kebab-case」 への変換の際に、
    より自然な形式に変換されるように修正しました。
    不具合やバグを発見した場合は、連絡をいただけると助かります。
View on X（Twitter）

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X（Twitter） もしくは、お問い合わせより、お願いします。

  • フィードバックの送信が完了しました。