ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

webpack5, node-sassはNode.jsのバージョンに影響される

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

webpackのプラグインnode-sassは、Node.jsのバージョンに大きく影響されます。

node-sassのバージョンとNode.jsのバージョンは対応表があるほど。

でも、エラー内容からはそれが想像できません。これを解決するのに2時間かかった。

バージョン不整合によるエラー内容

まずは、エラー内容を見てみましょう。

ここでは別PCにpackage.json, package-lock.jsonファイルを取り込んで、一気にwebpackまわりをインストールして環境移行を行っています。

Windowsで作業していますが、方法はLinuxでも同じ。

npm install
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated html-webpack-include-assets-plugin@2.0.0: WARNING: This module has been renamed to html-webpack-tags-plugin. Please install it instead. See https://github.com/jharris4/html-webpack-tags-plugin for more information.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated multi-glob@1.0.2: No longer maintained
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm ERR! code 1
npm ERR! path C:\Users\***\webpack5\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Users\TADTA_~1\AppData\Local\Temp\install-42b516af.cmd
npm ERR! node:internal/modules/cjs/loader:372
npm ERR!       throw err;
npm ERR!       ^
npm ERR!
npm ERR! Error: Cannot find module 'C:\Users\***\webpack5\node_modules\safer-buffer\safer.js'. Please verify that the package.json has a valid "main" entry
npm ERR!     at tryPackage (node:internal/modules/cjs/loader:364:19)
npm ERR!     at Function.Module._findPath (node:internal/modules/cjs/loader:577:18)
npm ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:804:27)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1028:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:102:18)
npm ERR!     at Object.<anonymous> (C:\Users\***\webpack5\node_modules\sshpk\lib\algs.js:3:14)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1126:14)
npm ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:1004:32) {
npm ERR!   code: 'MODULE_NOT_FOUND',
npm ERR!   path: 'C:\\Users\\***\\webpack5\\node_modules\\safer-buffer\\package.json',
npm ERR!   requestPath: 'safer-buffer'
npm ERR! }

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\***\AppData\Local\npm-cache\_logs\2022-09-07T05_29_43_762Z-debug-0.log

エラーの内容は、node-sassが使う別のnpmパッケージ、safer-bufferのモジュールファイルが見つからないというもの。

たしかに、safer-bufferフォルダを見ると空になってる。

ここから、node-sassとNode.jsのバージョンが合ってないことに最初からピンとくる人はいないでしょう。

一度経験しないかぎり。

じっさいボクは、safer-bufferをどうにかしようと試行錯誤して時間だけが過ぎてしまいました。

node-sassとNode.jsのバージョン対応表

NodeJS Ver.node-sass Ver.
Node 177.0+
Node 166.0+
Node 155.0+, <7.0
Node 144.14+
Node 134.13+, <5.0

使用するNode.jsに対するnode-sassのバージョン対応表の抜粋です。すべての対応表はこちらを参照してください。

自分の環境では、package.jsonでnode-sassのバージョンは5を使うようになってました。

package.json
{
  "devDependencies": {
    "node-sass": "^5.0.0",
  },
}

でも、使ってるNode.jsのバージョンは16。

node -v
v16.17.0

バージョンを合わせればいいので、package.jsonを編集して最初からやり直せばOK。

修正したpackage.json
{
  "devDependencies": {
    "node-sass": "^6.0.0",
  },
}

移行前のPCは壊れてしまったので確認のしようがないが、Node.jsのバージョンは13。

保存しているNode.jsのWindowsインストーラで確認した。

バージョン対応が合っていない、node-sassのバージョン5を使ってたみたい。

対応していないからといって必ずしもエラーになるとはかぎらないらしい。

まちがいの根本は、Node.jsの推奨版(LTS)のバージョンが上がったこと

WindowsでNode.jsをインストールすとき、サイトからインストーラーをダウンロードしますが、そこでは推奨版(LTS)の最新バージョンをインストールするように誘導されます。

バージョンを選ぶにはサイト内を巡回しないといけないので面倒くさい。

ボクがミスったのはここ。

移行前PCでは NodeJS 13 をインストールするように誘導され、今回の移行先PCでは NodeJS 16 に誘導されて使ってた。

同じことをしていたけどバージョン違いだったというアホみたいな初歩的ミス。

Node.jsはいったんインストールするとなかなかバージョンを上げないので、2, 3年放置は当たり前です。

今回のような移行作業などのきっかけがないかぎりバージョンを気にしません。

そこは気をつけるところですね? 放置期間が長くなりがちなのですぐ忘れるけど。

Linuxのインストールでは作業上バージョンを気にするので、このようなミスは起こりにくい。

前の投稿
webpack5, 環境移行はNode.jsのバージョンに気をつけよう!
webpack5, sass-loaderはnode-sassのバージョンに影響される
次の投稿
コメントを残す

*