Viteのビルド時に発生した「Cannot find module @rollup/rollup-linux-x64-gnu.」の対処方法

Today I Learned

発生した問題

ビルドツールにViteを採用しているプロジェクトがある。
ローカルでのビルドには成功したが、GitHub Actionsでは次のエラーが発生した。

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/chick-p/vite-project/node_modules/rollup/dist/native.js:87:9)
    at Object.<anonymous> (/home/runner/work/chick-p/vite-project/node_modules/rollup/dist/native.js:96: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/chick-p/vite-project/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/chick-p/vite-project/node_modules/rollup/dist/native.js:69:10)
      at Object.<anonymous> (/home/runner/work/chick-p/vite-project/node_modules/rollup/dist/native.js:96: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/chick-p/vite-project/node_modules/rollup/dist/native.js'
    ]
  }
}

発生した環境

  • GitHub Actionsの実行環境:Ubuntu 22.04.4 LTS
  • Node.js v20.11.1
  • Vite v5.2.2

ちなみにWindows環境でビルドした場合はCannot find module @rollup/rollup-win32-x64-msvc.というエラーが発生する。

原因

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

解決策

ViteでRollupを使うときは@rollup/wasm-nodeを使用するように指定し、npm installする。
この値は、「package.json」のoverridesプロパティで指定する。

package.json
  "overrides": {
    "vite": {
      "rollup": "npm:@rollup/wasm-node"
    }

Rollupがビルド環境ごとに提供する「@rollup/rollup-<platform>-<arch>」というのnpmパッケージを使用する方法もあるが、 ビルド環境ごとのパッケージをpackage-jsonに指定する必要がある。
一方でWebAssemblyであればマルチプラットフォームで動作するため、環境依存を解消できる。