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 が取得できず、 uaundefined になってしまっているということのようです。

エラー内容
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 以降にバージョンアップすると動くようになります。

参考サイト

関連記事

JavaScript のソースマップがあまりにも便利なので、もはやソースマップ無しでは開発がツライという感じなのですが、最近ふと Sass にもソースマップがあったことを思い出しました。ということで Sass でソースマップを使う方法をまとめておきます。いまさら感がとんでもなくスゴイですが、誰かのお役に立てれば幸いです ...
CSS自体は楽しいものですが、長く運用していると、CSSファイルは巨大化し、複雑になり、メンテナンスが難しくなりがちです。CSSファイルは誰もメンテナンスできないなんていうプロジェクトに何度か遭遇したことがあります。巨大で複雑なCSSファイルをメンテナンスできるようにするには、どうすればよいでしょうか?そこで登場するの ...
最近の Web 界隈では、UX を高めるために、UI を JavaScript でガリガリ実装するというのが普通になってます。フロントエンドエンジニアなんていう職種が生まれるほど、この界隈は活発です。そこでフロントエンド開発でほぼ必須となるであろう Node.js と npm について少しまとめてみます。今更感がすごい ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

  • 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」 への変換の際に、
    より自然な形式に変換されるように修正しました。
    不具合やバグを発見した場合は、連絡をいただけると助かります。

フィードバック

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

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

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

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

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