Vite のビルド時に出た Cannot find module @rollup/rollup-linux-x64-gnu. の解決

初出情報じゃないですが、僕の場合はもうちょっと根深いというか知識不足の可能性があるので、一旦状況メモします。

解決方法

package.json に以下の記述を追加

  "optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "4.6.1"
  }

解決方法の参考

ちなみに、エラー内に記述されている「node-modules と package-lock.json を消す方法」でやると、ビルド自体は成功しました。が、私の場合は package-lock.json を使わないことによる別の問題が発生しました。（調査中）

エラー時の出力はこちら

> vue-tsc && vite build && cp -R json dist
/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js:89

		throw new Error(
		      ^

Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
    at requireWithFriendlyError (/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js:89:9)
    at Object.<anonymous> (/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js:98:76)
    ... 3 lines matching cause stack trace ...
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) {
  [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu'
  Require stack:
  - /home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
      at Module._load (node:internal/modules/cjs/loader:985:27)
      at Module.require (node:internal/modules/cjs/loader:1235:19)
      at require (node:internal/modules/helpers:176:18)
      at requireWithFriendlyError (/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js:71:10)
      at Object.<anonymous> (/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js:98:76)
      at Module._compile (node:internal/modules/cjs/loader:1376:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
      at Module.load (node:internal/modules/cjs/loader:1207:32)
      at Module._load (node:internal/modules/cjs/loader:1023:12) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/home/runner/work/lunchNoCohoGaRoulette/lunchNoCohoGaRoulette/node_modules/rollup/dist/native.js'
    ]
  }
}

原因

ひよこまめ氏の解説 参考

Viteのプロダクションビルドでは、Rollupを使ってビルドが行なわれている。
このRollupでのビルドには、rollupパッケージの代わりに、事前にコンパイルされたバイナリファイルが使用される。
そのためビルドする際には、ビルド環境に合わせてコンパイルされたバイナリファイルが必要となる。

一旦解決ですが現時点での疑問

ちなみに作成したものはこちらとなります。
https://github.com/YuichiSemura/lunchNoCohoGaRoulette
https://yuichisemura.github.io/lunchNoCohoGaRoulette/

自分用メモとして今わかってないことを書いておきます。

• ビルド環境による、ビルド結果の差はどこからくるのか？
  • わずかな挙動の違いは具体的になんだったのか？
  • 一般的に、環境によって npm install の結果が変わる原因は？
• yarn の依存関係解決失敗理由は？
  • npm で成功し yarn で失敗した原因は？

node-modules と package-lock.json を消した場合

冒頭のエラーが発生した際、一旦 node-modules と package-lock.json を消して対応しました。その結果、ビルドは成功しましたが、ビルドしたシステムがおかしくなりました。具体的にはビルド３D部のカメラ操作に異変がありました。Actions 上の Artifacts をダウンロードしてローカルで確認しましたが、やはりローカルでビルドしたものと比べてわずかに挙動の変化がありました。何回か Actions 上でビルドしましたが結果は同じでした。

原因は不明ですが、冒頭の修正で解決しました。package-lock.json を消したり消さなかったりしたことに原因があると推測しています。

npm と yarn を用いた際の依存関係解決結果の差

これも別件ですが、そもそも yarn を使おうとして 依存関係の解決に失敗しました。

dependencies の @tresjs/cientos について、それが　peerdependencies として設定している tweakpane というパッケージがあるのですが、yarn を用いた場合には tweakpane インストールされませんでした。yarn.lock 上に存在しないことから確認しました。

✘ [ERROR] Could not resolve "tweakpane"

    node_modules/@tresjs/cientos/dist/trescientos.js:15:27:
      15 │ import { Pane as ac } from "tweakpane";
         ╵                            ~~~~~~~~~~~

  You can mark the path "tweakpane" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

試しに package.json に tweakpane を追加して yarn すると動きだしました。

今後追記します。