webpackを使った環境は、package.json, package-lock.jsonファイルさえあれば、コマンド一発で他PCでもまったく同じ環境が作れます。
ただエラーが出たときはツラい。原因はNode.jsのバージョン違いだったんですが、そのエラーはバージョン違いが想像できない内容になることがあるから。
webpackにかぎらず、Node.jsをメインにした環境はpackage.jsonファイルさえあれば別環境への移行はかんたんです。
package.jsonは、webpackなど環境を構成するnpmパッケージ情報が入っていて、その情報から同じ環境をインストールできる。
package-lock.jsonはインストール履歴で、依存パッケージも含めたすべてのパッケージのインストールしたバージョンが入っている。
package.jsonは依存パッケージの情報はないので、より正確に環境を移行しようとするならpackage-lock.jsonも必要だが、なくてもpackage.jsonからインストールできる。
package.jsonはバージョンの範囲指定ができるので、移行前と移行時の間にパッケージのアップデートが行われれば、ちがうバージョンをインストールする。
ということで、package.jsonを別PCへコピーして npm install コマンドで一気にインストール作業したところ、次のようなエラーが発生しました。
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が使う依存パッケージsafer-bufferのモジュールが見つからないというもの。
結果を言うと、node-sassとNode.jsのバージョンが違うために起きてます。
そこでnode-sassのバージョンを上げました。くわしくはこちらをどうぞ。
これで終わりかと思いきや、新たなエラーが発生しました。
npm ERR! While resolving: sass-loader@10.1.0
npm ERR! Found: node-sass@6.0.1
npm ERR! node_modules/node-sass
npm ERR! dev node-sass@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional node-sass@"^4.0.0 || ^5.0.0" from sass-loader@10.1.0
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"^10.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: node-sass@5.0.0
npm ERR! node_modules/node-sass
npm ERR! peerOptional node-sass@"^4.0.0 || ^5.0.0" from sass-loader@10.1.0
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"^10.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\***\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:今度は、node-sassとsass-loaderのバージョンの不整合が起きました。
そこで、sass-loaderのバージョンも変更。くわしくはこちらをどうぞ。
これですべて解決。
Node.jsのバージョンを上げると関連するパッケージのバージョンアップも必要。
Node.jsで作るプログラムは、npmパッケージの集合体です。そのパッケージは内部でnpmパッケージを使ってることが多い。
（その内部のパッケージを依存パッケージという。）
なので今回のように、Node.jsのバージョンを上げると数珠つなぎのようにパッケージのバージョンの不整合が起きます。
Node.jsを使ってるとよく起きる。
今回はWindowsで環境を作ったが、WindowsのNode.jsのインストーラーは推奨版（LTS）の最新をダウンロードするように誘導される。
移行元と移行先のNode.jsのバージョンが変わってるのに気づきにくい。
しかもNode.jsはインストールするとなかなかバージョンを上げないので、Node.jsの推奨バージョンが変わるのはよくある。
今回は node-sassとsass-loaderの2つだけで済みましたがラッキーなほう。
node-sass, sass-loader間のようにエラーメッセージ（2番目の）でバージョン不整合が分かるのもありますが、見当がつかないのもあります。
（1番目のメッセージはバージョン不整合だと分からない。）
どうしてもエラーの原因が分からないときは、まず最初にパッケージのバージョン不整合を疑いましょう。
また、バージョン不整合の修正に慣れましょう。Node.jsを使いこなすコツです。
