Zenn
🙉

【Next.js v15.0.0】Dart-sassの警告がうるさかったんだ

に公開
Next.js
雑記
備忘録
tech

はじめに

（Next.js v15.0.1以降で修正されています）

Next.js14系で個人開発中のプロジェクトを15.0.0にアップデートし、Turbopackの恩恵を受けてみたかった私。
そこまでライブラリを使用した開発ではなかったのですが、Sassの警告が大量に放出され他で出たエラーが流されてしまう事態に陥りました。

警告について

 "Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0".
  • 警告の意味
    「古いJavaScript API（legacy JS API）は非推奨となり、Dart Sass 2.0.0で完全に削除される予定」

Next.jsは最初からDartSassを使用しており、その名残で一部古いデータが取り残されていたようです。

解決方法

アップデート後は特にスタイルが破壊されるなどの致命的な問題ではなかったです。
「警告」なだけであったため、legacy JS APIから出る警告を非表示にする対応で問題ないようです！

// next.config.js
const nextConfig: NextConfig = {
  sassOptions: {
    silenceDeprecations: ['legacy-js-api'],
  }
}

警告の詳細

よくわからんので歴史や背景を調べたよ！

移行の歴史

以前はNode Sass（LibSassベース）が主流だった。
その後、Dart Sassが新しい標準実装として採用された。
移行をスムーズにするため、Dart SassはNode Sassと互換性のある古いAPIもサポートしていた。

現在の状況

Next.jsはDart Sassを使用していますが、内部のコードの一部で依然として古いAPI形式の呼び出しが残っている。
これは完全な移行が終わっていない過渡期の状態といえる。

警告が出る理由

Dart Sassチームは古いAPIを完全に廃止する予定（2.0.0で）
そのため、古いAPI形式の呼び出しに対して警告を出すようになっている。
Next.jsの内部で使用されている古いAPI形式の部分が、この警告のトリガーとなったようです。

https://sass-lang.com/documentation/breaking-changes/legacy-js-api/

さいごに

こちらの件は最新バージョンで修正されております。
ぺぺっとNext.js15.0.1以降へのアップデートで警告は出なくなります

※むかしむかしにメモとして作成した記事です

Discussion