質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1848閲覧

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

pearlib

総合スコア1

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2023/05/06 08:20

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

お疲れ様です

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

解決案

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

json:package.json

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

詳しい説明

デフォルトの設定ですと、electronv13がインストールされます。
electronv13に同梱されている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

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

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

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


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

投稿2023/05/09 12:34

編集2023/05/09 12:42
Hajime

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pearlib

2023/05/13 10:59

Hajime様 ご回答ありがとうございます. 起動確認できましたのでベストアンサーとさせていただきます.勉強になりました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問