Electron+Next.js(Typescript)で開発モードを起動したい

実現したいこと

Electron+Next.jsでデスクトップアプリを開発したい．

前提

以下のリポジトリをもとにプロジェクトを作成しました．
https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript

プロジェクトの作成に

shell
1yarn create next-app --example with-electron-typescript with-electron-typescript-app

を実行し，package.jsonにname, version, author, descriptionを追加しました．
yarn devでテスト起動をしたところ以下のようなエラーが発生しました．

発生している問題・エラーメッセージ

(node:1726) UnhandledPromiseRejectionWarning: Error: Cannot find module 'node:stream/web'
Require stack:
- /Users/[username]/Programs/ongoing/Electron_prac/with-electron-typescript-app/node_modules/next/dist/lib/download-wasm-swc.js
.
.
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
(Use `Electron --trace-warnings ...` to show where the warning was created)
(node:1726) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:1726) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

考えたこと

実は2ヶ月半前ほどにも上記の技術に触れており，そのプロジェクトについては今でも無事に起動ができるので，リポジトリの変更が原因なのではないかと考えています．
なお，リポジトリ(https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript) の変更履歴を見ると，二ヶ月前にnext.config.jsが追加されています．

javascript:next.config.js
1/**
2 * @type {import('next').NextConfig}
3 */
4const nextConfig = {
5  output: 'export',
6}
7
8module.exports = nextConfig
9

補足情報（FW/ツールのバージョンなど）

node.js v18.16.0

行動規範の内容に同意します

回答1件

ベストアンサー

お疲れ様です

僕も本日まったく同じエラーが出ました
エラーメッセージでググったところ、このページにたどり着きましたので回答させて頂きます

解決案

package.jsonのdevDependenciesのelectronを^24に変更しnode_modulesを削除しインストールし直す

json:package.json
1{
2  "dependencies": {
3    .......(中略）
4    "electron":  "^24",
5    .......(中略）
6  }
7}

詳しい説明

デフォルトの設定ですと、electronのv13がインストールされます。
electronのv13に同梱されているnodeのバージョンはv14.16とかなり古いです。

https://www.electronjs.org/docs/latest/tutorial/electron-timelines

エラーの原因となっているモジュールnode:stream/web読み込み

https://github.com/vercel/next.js/blob/e6acd40cba2c565919ee3e94bb9e8a100dc69495/packages/next/src/lib/download-wasm-swc.ts#L9

ですが、このモジュールはnodeのv16.5.0から追加されています

https://nodejs.org/api/webstreams.html

ですので、electronのバージョンを上げ、同梱されているnodeのバージョンを上げてやる必要があります。

（余談ですが、package.jsonのdevDependenciesのnextを13.2.4(またはそれ以下)に変更することでnextとelectronに同梱されているnodeのバージョンを合わせてやっても動作すると思いますが、node、electronともにバージョンが古くなりすぎるのが難点かと思います。）

投稿2023/05/09 12:34

編集2023/05/09 12:42