はじめに
Electron＋Next.jsでデスクトップアプリの開発をしています。
解決方法としては簡単だったのですが、長時間バグに悩まされたので記録に残します
問題
Electronをビルドした後に、アプリを起動したところ以下のエラーが発生しました。
Uncaught Exception:
Error: Cannot find module ‘form-data’
Require stack:
- /Applications/Fabriid.app/Contents/Resources/app.asar/node_modules/axios/dist/node/axios.cjs
- /Applications/Fabriid.app/Contents/Resources/app.asar/main/index.js
at node:internal/modules/cjs/loader:1084:15
at Function._resolveFilename (node:electron/js2c/browser_init:2:117419)
at node:internal/modules/cjs/loader:929:27
at Function._load (node:electron/js2c/asar_bundle:2:13377)
at Module.require (node:internal/modules/cjs/loader:1150:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object. > (/Applications/Fabriid.app/Contents/Resources/app.asar/node_modules/axios/dist/node/axios.cjs:4:20)
at Module._compile (node:internal/modules/cjs/loader:1271:14)
at Object..js (node:internal/modules/cjs/loader:1326:10)
at Module.load (node:internal/modules/cjs/loader:1126:32)
解決方法
問題は pnpm にありました。そして、ちゃんとドキュメントにも記載されていました。
electron-builder かつ pnpm を使っている場合、以下を .npmrc に記載する必要があります。
node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true
.npmrc の場所はこちらを参考にしてください。
同じチームメンバーも同じ問題にハマってしまうので、pnpm-workspace.yaml に記載のフォルダの配下に書くと良いかもしれないですね。
pnpm config コマンドを使用して、ユーザーおよびグローバルの .npmrc ファイルの内容を更新および編集することができます。
関連する4つのファイルは次のとおりです。
- プロジェクトごとの設定ファイル(/path/to/my/project/.npmrc)
- ワークスペースごとの設定ファイル (pnpm-workspace.yaml ファイルが含まれているディレクトリー)
- ユーザーごとの設定ファイル(~/.npmrc)
- グローバルな設定ファイル (/etc/npmrc)
上記を設定し再度実行すればエラーは消えているはずです！
おわりに
英語読む拒絶反応から半日以上時間を溶かしてしまいました。ドキュメントは公式のをしっかり読みましょう(自戒)