nuxt electronのエラー全部消す!
READMEの通りの導入ではエラーが出てしまう!
試行錯誤の過程をすべて記しておく
発生エラー
この状態だと、以下のようなエラー、不具合が発生する
- read ECONNRESET エラー
これにより、強制的にリロードされてしまっている
ERROR [unhandledRejection] read ECONNRESET
at TCP.onStreamRead (node:internal/stream_base_commons:218:20)
- 起動したまま放置しているとwrite after endエラーも出る
ERROR [unhandledRejection] write after end
at _write (node:internal/streams/writable:481:11)
at Writable.write (node:internal/streams/writable:502:10)
at Sender.sendFrame (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:59746:20)
at Sender.close (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:59474:12)
at WebSocket.close (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:60554:18)
at Receiver.receiverOnConclude (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:61400:18)
at Receiver.emit (node:events:519:28)
at Receiver.controlMessage (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:59233:14)
at Receiver.getData (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:59054:12)
at Receiver.startLoop (/D:/Zenn/playground/nuxt-electron/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:58744:16)
エラーをかみ砕いてみる
ECONNRESETエラーは、TCP接続が相手側によって強制的にクローズされた(リセットされた)時に発生します。
https://zenn.dev/sasakir/articles/8457791bdd173a#9.-econnreset
TCP周りでなんらかの不具合が起きているっぽい。
ここで思い浮かぶ懸念は、loadURL
の引数を少し編集したこと
- new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL);
+ new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL ?? "");
ここを深掘りするのがいいと思う
process.env.VITE_DEV_SERVER_URLにはhttp://localhost:58579
が入っていた。
毎回変わっていそう。
そうするとここをいじったのは関係なさそう。
ちなみに、vite-plugin-electronで実装されているらしい
完全にこれだ。
みんなまだresolveしていないって言ってる...
どうすればいいんや...
とりあえず精読しよう。
これらも同じようなIssuesらしい。(おそらく)
ちなみに、nuxt-electronのquick-startはnuxt modulesのものではないらしいのでそこまで参考にはできないかも。
This quick-start is only a combination of nuxt and electron-vite . You can refer to their official docs separately to learn more.
https://github.com/caoxiemeihao/nuxt-electron/tree/main/quick-start
翻訳
HMR WebSocket "Invalid frame header" error causing continuous page reloads after setting app.baseURL
環境
- Operating System: Darwin
- Node Version: v21.5.0
- Nuxt Version: 3.11.1
- CLI Version: 3.11.0
- Nitro Version: 2.9.4
- Package Manager: pnpm@8.15.5
- Builder: -
- User Config: app, devtools
- Runtime Modules: -
- Build Modules: -
再現手順
-
nuxt.config.js
でapp.baseURL
をセットする - devモードでアプリケーションを実行する
- サービスアドレスへアクセスする
- コンソールにエラーが表示され、ページが継続的にリロードされる
バグの詳細
Nuxt3においてbaseURLをセットした後、HMRのWebSocketがInvalid frame header
エラーを投げ、devモードで継続的にページがリロードされる。
これは nuxt/cli#370 によって nuxt v3.11.1 で解決されたと思います。
これは nuxt/cli#370 によって nuxt v3.11.1 で解決されたと思います。
まだ解決されていません
まだ解決されていません
これは問題ありません。
Nuxtの依存関係が更新されていないので、Nuxiを手動でインストールする必要があります。
Nuxiを手動でインストールする必要があります
"devDependencies": {
"@nuxt/image": "^1.4.0",
"@nuxtjs/i18n": "^8.2.0",
"nuxi": "^3.11.1",
"nuxt": "^3.11.1",
"prettier": "^3.2.5",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
ERROR [unhandledRejection] read ECONNRESET 11:03:41
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ERROR [unhandledRejection] read ECONNRESET 11:03:43
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ERROR [unhandledRejection] write after end caoxiemeihao/nuxt-electron#71からメンションされました
ERROR [unhandledRejection] read ECONNRESET #23832からメンションされました
アップデート後もまだ問題があります。
最初の npx nuxi@latest upgrade
ではnuxt@3.11.2にアップデートされなかったため、pnpm up nuxt --latest
を利用して手動でアップデートしたところ、この問題が発生しています。
2024/03/14
この問題は未だ解決していません。
nuxtのバージョンを確認すると、3.11.2以上になっている
"nuxt": "^3.11.2",
翻訳
ERROR [unhandledRejection] write after end
このパッケージはnuxi upgrade
を実行するまでは正しく動いていました。
このエラーはnuxt/nuxt#23832に関連するものだと思います。
そのスレッドのnitroのプロキシの回避策を試しましたが、うまくいきませんでした。
さらに試してみるので、何かあれば報告します。
ERROR [unhandledRejection] write after end 1:58:54 PM
at _write (node:internal/streams/writable:481:11)
at Writable.write (node:internal/streams/writable:502:10)
at Sender.sendFrame (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:58524:20)
at Sender.close (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:58252:12)
at WebSocket.close (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:59332:18)
at Receiver.receiverOnConclude (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:60178:18)
at Receiver.emit (node:events:518:28)
at Receiver.controlMessage (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:57982:14)
at Receiver.getData (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:57798:12)
at Receiver.startLoop (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:57488:16)
at Receiver._write (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:57415:10)
at writeOrBuffer (node:internal/streams/writable:564:12)
at _write (node:internal/streams/writable:493:10)
at Writable.write (node:internal/streams/writable:502:10)
at Socket.socketOnData (node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:60327:37)
at Socket.emit (node:events:518:28)
at addChunk (node:internal/streams/readable:559:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
at Readable.push (node:internal/streams/readable:390:5)
at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
同じ問題を抱えています。
quick-startすら起動しません。
nuxt/nuxt#26396が原因であることは間違いないだろう。
実際には直っていないが...
(Issueは直っているということでCloseされていることから)
このバグはnuxtもしくはnuxi(どちらかわかりませんが)の古いバージョンでは存在しませんでした。
古いバージョンを利用することでこの問題を回避できます。
私の場合、nuxt: 3.10.2そしてnuxi: 3.10.1を使用していました。
古いバージョンのnuxiを強制的にインストールするには、package.jsonにoverrides
(npmの場合)またはresolutions
(yarnの場合)を追加します。
そうすることで動くはずです。
ERROR [unhandledRejection] read ECONNRESET nuxt/nuxt#23832にメンションされました。
Nuxt core teamはこのIssuesを解決できる準備が整っていないようです。
どなたか修正案や回避策をご存じですか?
このバグはnuxtもしくはnuxi(どちらかわかりませんが)の古いバージョンでは存在しませんでした。
古いバージョンを利用することでこの問題を回避できます。
nuxtを3.6.5にダウングレートしたらすべてうまくいきました。
また、最新のquick-startも試すことができます。
#74 (comment)
この方法で修正されました。
しかし、これはパッケージ自体で処理されるべきです。
ERROR [unhandledRejection] read ECONNRESET
環境
- Operating System: Linux
- Node Version: v18.18.2
- Nuxt Version: 3.7.4
- CLI Version: 3.9.0
- Nitro Version: 2.6.3
- Package Manager: pnpm@8.9.2
- Builder: -
- User Config: app, devtools, modules, css, ui, colorMode, postcss
- Runtime Modules: @nuxt/ui@2.9.0, @nuxt/image@1.0.0-rc.3
- Build Modules: -
再現手順
会社のルールでコードの共有ができません。
バグの詳細
長時間プログラミングをしているとNuxtがこのサーバーエラーを発生させます。
全てを再起動させる必要があり、非常に面倒です。
Vite server hmr 17 files in 10811.276ms
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:41119 10:57:18 AM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
カスタムHMRポートはありますか?
41119
はNuxt開発サーバーのメインポートですか?
これは再現が非常に難しく、ローカル環境設定のどこかに問題があるように思います。
また、こちら側ではカスタムHMRポートをセットしていません。
これが理由の一つで、私自身ではこの問題を報告していません。Nodeやpnpmを完全に再インストールしてもこの問題は発生します。
しかし、短期的な回避策としてこれが役立つかもしれません。
✔ Nitro built in 6575 ms nitro 11:52:46 PM
ℹ Vite client warmed up in 14274ms 11:52:47 PM
(node:80030) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
ERROR [unhandledRejection] connect ETIMEDOUT 127.0.0.1:55605 11:53:36 PM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
このポートは開発サーバーを再起動するたびに変更されます。
私の現在の回避策は、http://127.0.0.1:55605/
を使用することで、タイムアウトの問題が発生しなくなります。
これはレイヤーや複雑なNuxtプロジェクトに関連している可能性があります。
サードパーティのモジュールやプラグインを使用しないクリーンなインストールでは、この問題は発生しません。
環境
- Operating System: Darwin
- Node Version: v18.18.1
- Nuxt Version: 3.8.0
- CLI Version: 3.9.1
- Nitro Version: 2.7.0
- Package Manager: pnpm@8.9.2
- Builder: -
- User Config: experimental, debug, dev, alias, runtimeConfig, extends, routeRules, srcDir, modules, sitemap, site, plugins, session, i18n, tailwindcss, typescript, build, vite, app, spaLoadingTemplate
- Runtime Modules: @pinia/nuxt@0.4.11, @vueuse/nuxt@10.1.2, @sidebase/nuxt-session@0.2.7, @nuxtjs/i18n@8.0.0-rc.5, @nuxtseo/module@2.0.0-beta.15, nuxt-swiper@1.2.2, dayjs-nuxt@1.2.7, @dargmuesli/nuxt-cookie-control@6.4.6, unplugin-icons/nuxt, @nuxtjs/tailwindcss@6.8.0, nuxt-headlessui@1.1.4, nuxt-og-image@2.1.3, nuxt-simple-robots@3.1.6, nuxt-schema-org@3.0.1, nuxt-simple-sitemap@3.4.0
- Build Modules: -
同じ問題を経験しています。
node-rfcというパッケージを使用しているのですが、これが問題の根本原因のようです。
このモジュールにはC++のコードバインディングが含まれており、ホットリロードを試みるとアプリケーション全体がクラッシュしてしまうのではないかと疑っています。
私の経験では、HTTPサーバー自体はクラッシュしませんが、完全にフリーズします。
ポートのリスニングは続けるものの、リクエストには一切応答しなくなります。
時間ができて、最小限のプロジェクトで問題を再現できたら新しい問題を作成しようと思っていましたが、この記事を見つけたのでコメントを残します。
最も重要な点を言い忘れていました。
サーバーを最初に起動したときはコードは正常に動作しますが、変更を加えて保存するたびにフリーズします。
ただし、フリーズするのはサーバー側で変更を加えたときだけで、クライアント側での変更ではフリーズしません。
変更を加えるたびにCtrl+Cで停止して再起動するのは非常に煩わしいです。
最小限のプロジェクトで問題を再現することに成功しました。しかし、注意すべき点は、node-rfc
モジュールはnwrfcsdk
というライセンスシステムライブラリに依存しており、これは一連のLinux .so
ライブラリファイルを含んでいることです。もし興味があるなら、リポジトリへのアクセス権を付与しますので、それを確認して試していただけます。残念ながら、StackBlitzやCodeSandboxの制限によりこれを共有することはできません。StackBlitzではファイルのアップロードがサポートされていないため、nwrfcsdk
を提供することができませんでした。また、CodeSandboxではさまざまな困難に直面し、先に進むことができませんでした。
GitHubのユーザー名を教えていただければ、リポジトリに招待します。すでにdanielroeをリポジトリに招待しており、こちらで確認できます。もし時間があれば、画面共有セッションを設けてさらなるサポートを行うことも可能です。
また、以下のコードスニペットをnuxt.config.tsに追加して問題を解決しようとしましたが、うまくいきませんでした:
vite: {
optimizeDeps: {
exclude: ['node-rfc'],
},
}
もう一つの課題は、npm run buildを実行し、node .output/server/index.mjsで起動しようとすると、node-rfcに関連するエラーが発生することです。この問題は、手動でnode_modules/node-rfcを.output/server/node_modules/node-rfc/にコピーすると解決します。
このエラーが開発中に発生し、エラーの正確な瞬間をとらえることができないため再現を行うことは不可能です。
また、カスタムポートは使用しておらず、デフォルトのNuxtConfigurationで作業しています。
これはDBコネクションのあるプロジェクトで起こっていることのように思います。
皆さんはプロジェクトでDB接続をしていますか?
これはDBコネクションのあるプロジェクトで起こっていることのように思います。
私はDBコネクションとは関係ないように思います。
私たちのヘッドレスeコマーススタックでは、Laravelに接続してnitroを使用しています。
私たちのエンドポイントのほとんどは、useAsyncData
キャッチオールを使用し、nuxtサーバールートをヒットします。
そして、$fetchを利用して、例えばカスタムコンポーザブルを使ってサーバーサイドに送信します。
これは、v3.7.0まではうまく動作していたため、Nitro2.6アップデートに関係しているのではないかと思います。
import type { H3Event } from 'h3'
import { getCookie } from 'h3'
const baseUrl = process.env.NUXT_APP_HUB_BASE_URL
interface INitroApiOptions {
event: H3Event
endpoint: string
action?: string
requiresAuth?: boolean
method?: any
contentType?: string
query?: any
}
export default function useNitroApi(options: INitroApiOptions, data?: any): Promise<any> {
const {
event,
endpoint,
action,
requiresAuth = false,
method = 'GET',
contentType = 'application/json',
query = {},
} = options
const headers: any = {
Accept: contentType,
'Language-Locale': getCookie(event, 'i18n_redirected'),
'Content-Type': contentType,
}
if (requiresAuth) {
headers.Authorization = `Bearer ${getCookie(event, 'token') || ''}`
}
const opts: any = {
method,
headers,
}
if (!['show', 'index', 'destroy'].includes(<string>action)) {
opts.body = data ? JSON.stringify(data) : undefined
opts.query = query
}
return $fetch(`${baseUrl}${endpoint}`, opts)
}
これは、v3.7.0まではうまく動作していたため、Nitro2.6アップデートに関係しているのではないかと思います。
私はバージョン3.7でもこのエラーが発生していましたが、DBが疑わしいと思っていたため興味を持っていませんでした。
現在、3.8でも同じエラーが発生しています。
この問題はnitroがunjs/httpxyに変更したことが原因ではないですか?
これは3.7.0がリリースされたのと同じころのもののようです。
unjs/nitro@dd8101f
また、エラーの発生源は以下のようです。
この問題の解決策を見つけました。
以下のNuxt cofigを追加してみてください。
私の環境では何度かリフレッシュしてもタイムアウトが発生しなくなりました。
nitro: {
devProxy: {
host: 'localhost',
},
},
以下のNuxt cofigを追加してみてください。
私の環境では何度かリフレッシュしてもタイムアウトが発生しなくなりました。
私の環境では動きません。
サーバーサイドのコードを更新するたび、問題が発生します。
私の環境では動きません。
localhostをデフォルトポートで使っていますか?
あなたのエラーはnodeに対するエラーのようです。
そして、恐らくnode-rfcが関連していそうです。
現在のnodeのバージョンは何ですか?
@productdevbook @castrogarciajs 私の解決法で動作しましたか?
わたしのバージョンは20.9.0です。
nuxtのデフォルトポートを使用しています。
わたしのバージョンは20.9.0です。
nuxtのデフォルトポートを使用しています。
わかりました。
先ほどのnuxt configを追加してもエラーが出たままですか?
nitro: {
devProxy: {
host: 'localhost',
},
},
localhostをデフォルトポートで使っていますか?
あなたのエラーはnodeに対するエラーのようです。
そして、恐らくnode-rfcが関連していそうです。
現在のnodeのバージョンは何ですか?
node-rfcとHMRで起きている複雑なあれこれによってエラーが起こっているのだろうと思います。
憶測にすぎず、確信はないですが。
普段はカスタムホスト、ポートを使っていますが、デフォルトホスト、ポート(私の場合はlocalhost:3000)でもエラーが発生しました。
unitythemaker@blazingfast ~/Projects/Other/sap_pentest/sap_pentest/frontend (main)
❯ node -v
v18.17.0
unitythemaker@blazingfast ~/Projects/Other/sap_pentest/sap_pentest/frontend (main)
❯ cat package.json | grep nuxt
"name": "nuxt-app",
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
"@nuxt/devtools": "latest",
"@nuxtjs/eslint-module": "^4.1.0",
"@nuxtjs/i18n": "8.0.0-rc.4",
"@nuxtjs/sentry": "^7.5.0",
"@nuxtjs/tailwindcss": "^6.8.0",
"@pinia/nuxt": "^0.4.11",
"nuxt": "^3.8.0",
もし私のミニマルリプロダクションを確認したい場合はこちらから。
もし私のミニマルリプロダクションを確認したい場合はこちらから。
node jsのバージョンを20にあげることをお勧めします。
@adam-code-labxの方法で動作したかもしれません。
node jsのバージョンを20にあげることをお勧めします。
Node v20に変更しましたが、いまだエラーが発生します。
![image]
うーん、nitroのdevProxyを上書きすればうまくいくはずなのだけど、、、。
nuxt configを見せてもらうことはできますか?
解決するかどうかはわかりませんが、localhostの代わりに127.0.0.1で直接リンクしてみてください。
また、これは設定の最後に追加してください。
export default defineNuxtConfig({
// ... nuxt config
nitro: {
devProxy: {
host: '127.0.0.1',
},
},
})
解決するかどうかはわかりませんが、localhostの代わりに127.0.0.1で直接リンクしてみてください。
また、これは設定の最後に追加してください。
これで解決できたようです。
ありがとうございます。
ERROR [unhandledRejection] read ECONNRESET #24355にメンションされました。
同じ問題に遭遇しています。
ERROR [unhandledRejection] connect ETIMEDOUT 127.0.0.1:55231
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1247:16)
以下の解決策では解決しませんでした。
nitro: {
devProxy: {
host: '127.0.0.1',
},
},
同じエラーが発生しています。
Nodeをv20にアップグレードし、devProxyの上書きを試しましたがうまくいきませんでした。
ERROR [unhandledRejection] connect ETIMEDOUT 127.0.0.1:61144 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
どなたか教えてください。
この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。
Nodeをv20にアップグレードし、devProxyの上書きを試しましたがうまくいきませんでした。
この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。
シンプルアプリケーションで再現できることを確認しました。
問題はリクエスト数のようです。
nuxt@3.6.5では正常に動作しました。
nuxt/cli#335
同じ症状ですか?
nuxt/cli#335の最後のエラーのみ発生しています。
ERROR [unhandledRejection] connect ETIMEDOUT 127.0.0.1:61574
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
同じ症状ですか?
関連する問題のように思いますが、(少なくとも私は)レンダリングが遅くなるような症状はありません。
devモードで実行するとほとんど確実にこのエラーが出ます。
直後にだったり、数分後だったり。
ファイルの保存やホットリロード(※HMR)が引き金になっているように思うが、一貫したパターンは見つからない。
そしてエラーは(※一個前のコメント同様に)最後のもののみです。
少しの間(通常は1,2分程度)開発でき、ある時点でファイルを保存しホットリロードを行うとこのエラーが発生します。
✔ Nitro built in 448 ms
ERROR [unhandledRejection] socket hang up
at connResetException (node:internal/errors:787:14)
at Socket.socketOnEnd (node:_http_client:519:23)
at Socket.emit (node:events:526:35)
at endReadableNT (node:internal/streams/readable:1589:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:61372
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。
同じ問題があります。
そしてエラーは(※一個前のコメント同様に)最後のもののみです。
少しの間(通常は1,2分程度)開発でき、ある時点でファイルを保存しホットリロードを行うとこのエラーが発生します。
同じ問題があります。
- Operating System: Linux
- Node Version: v20.11.1
- Nuxt Version: 3.10.2
- CLI Version: 3.10.1
- Nitro Version: 2.8.1
- Package Manager: pnpm@8.15.3
- Builder: -
- User Config: devtools, modules, plugins, i18n, imports, css, quasar, nitro, routeRules, proxy, app, piniaPersistedstate
- Runtime Modules: nuxt-quasar-ui@2.0.7, @pinia/nuxt@0.5.1, @nuxtjs/i18n@8.1.1, @vee-validate/nuxt@4.12.5, @nuxt-alt/proxy@2.5.8, @nuxtjs/eslint-module@4.1.0, @pinia-plugin-persistedstate/nuxt@1.2.0
- Build Modules: -
そしてエラーは(※一個前のコメント同様に)最後のもののみです。
少しの間(通常は1,2分程度)開発でき、ある時点でファイルを保存しホットリロードを行うとこのエラーが発生します。
同じ問題があります。
これはdevcontainerで開発している際に発見しました。
同じ問題があります。
- Operating System: Darwin
- Node Version: v20.11.0
- Nuxt Version: 3.10.3
- CLI Version: 3.10.1
- Nitro Version: 2.8.1
- Package Manager: yarn@1.22.19
- Builder: -
- User Config: devtools, modules, css, plugins, app, router, auth, devServer, robots, colorMode, pinia, build, typescript, piniaPersistedstate, hooks, runtimeConfig
- Runtime Modules: nuxt-icon@0.6.8, @nuxtjs/google-fonts@3.1.3, @formkit/auto-animate/nuxt@0.8.1, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxt/image@1.3.0, @nuxt/ui@2.14.1, @vueuse/nuxt@10.7.2, v-wave/nuxt, @sidebase/nuxt-auth@0.6.7, @nuxtjs/seo@2.0.0-rc.8
- Build Modules: -
devに変更を加えた後、以下のエラーが発生しました。
ERROR [unhandledRejection] socket hang up 3:21:02 AM
at connResetException (node:internal/errors:787:14)
at Socket.socketOnEnd (node:_http_client:519:23)
at Socket.emit (node:events:530:35)
at endReadableNT (node:internal/streams/readable:1696:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:51689 3:21:02 AM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
そして今日も。
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:54862 2:49:53 AM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:54862 2:52:22 AM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:54862 2:52:22 AM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16) (repeated 3 times)
どのようにプロジェクトを実行しているかというと、
HOST=0 NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev
そして
devServer: {
https: {
key: './ssl/localhost-key.pem',
cert: './ssl/localhost.pem'
}
},
です。
以下の方法は解決につながりませんでした。
nitro: {
devProxy: {
host: '127.0.0.1',
},
},
なぜ彼らがこの問題を無視しているかわかりません...
これは間違いなくnuxtの問題ではない。
恐らくnitroの問題だろう。
純粋なnitroの環境で再現出来たらNitroのissuesに挙げてもらえますか?
Nuxtのプロジェクト全体をNitroプロジェクトで再現するにはどうすればよいですか?
また、すでにNitroのIssuesに起票した人はいますか?
これは間違いなくnuxtの問題ではない。
他のissue(nuxt/cli#335)で既に報告した通り、これはnitroだけの問題ではなさそうです。
nuxt@3.6.5をインストールするとNitroのバージョンは最新のNitro@2.8.1のままです。
nuxtとnitroのインタラクトの問題ではありませんか?
その場合はnuxt/cliにあるか、cliがnitroとどのようにインタラクトするかによります。
同じ問題があります。
Macでnodeの最新のv18とv20を使用しています。
唯一の回避策はnitropackをv2.8.1にダウングレードすることです。
ヒントをありがとうございます。
この問題はまだ解決されていないのにこのissuesはclosedになっているんですか?
私のプロジェクトもnode 20.10で最新バージョンにアップグレードしたところ同じ問題に直面しました。
ERROR [unhandledRejection] read ECONNRESET
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
ERROR [unhandledRejection] write after end
唯一の回避策はnitropackをv2.8.1にダウングレードすることです。
nuxtを3.10.3から3.11.1にアップグレードしたとき、同様のエラーが発生しました。
nitropackを2.8.1にダウングレードすると問題が解決しました。
バージョンとconfig
- node : v18.19.1
- nuxt: 3.11.1
- pnpm: 8.15.5
- Nuxt only client mode ssr: false
package.json
{
...
"devDependencies": {
"nuxt": "3.11.1",
....
},
"pnpm": {
"overrides": {
"nitropack": "2.8.1"
}
}
}
環境
Nuxt v3.11.1
Nitro v2.9.4
Node v20.11.1
Operating System: Windows 10
SSR: True
それらがどのように関係しているかはわからないが、Nuxt configでapp.buildAssetsDir
の値を設定しないとエラーが出なくなりました。
クリーンインストールも試してみたが、この変数を設定するとエラーが発生します。
私はapp.buildAssetsDirを設定していません。
つまり、私の場合はこれが原因ではありません。
HMR WebSocket "Invalid frame header" error causing continuous page reloads after setting app.baseURL #26396でメンションされました。
ERROR [unhandledRejection] write after end caoxiemeihao/nuxt-electron#71でメンションされました。
私はapp.buildAssetsDirを設定していません。
つまり、私の場合はこれが原因ではありません。
それを設定しているプラグインはありませんか?
私の場合、nuxt-electron
がそれを設定していました。
私の場合、
nuxt-electron
がそれを設定していました。
同じ問題があります。
以下が私のconfigです。
"nuxt-electron": "^0.7.0",
"nuxt": "^3.11.1",
"vue": "^3.4.21",
以下のようにNitroとNuxtをアップデータしましたが動きませんでした。
これはチーム全体で引き起こされている問題のため、local configの問題ではありません。
localhostをデバッグモードで実行したタイミングでは怪しい点はありませんが、最初のホットリロード(クライアントのみの変更)でサーバーがクラッシュします。
vite:hmr [vue:update(template)] /Users/.../index.vue +0ms
ℹ hmr update /pages/.../index.vue, /assets/css/tailwind.css, /assets/css/tailwind.css?direct 2:46:20 PM
connect:dispatcher viteTimeMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580775 +16s
connect:dispatcher viteCachedTransformMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580775 +0ms
connect:dispatcher viteBaseMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580775 +0ms
connect:dispatcher viteHMRPingMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580775 +0ms
connect:dispatcher handle : /_nuxt/assets/css/tailwind.css?t=1711633580775 +0ms
connect:dispatcher viteTransformMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580775 +0ms
connect:dispatcher viteTimeMiddleware : /_nuxt/pages/.../index.vue?t=1711633580756 +1ms
connect:dispatcher viteCachedTransformMiddleware : /_nuxt/pages/.../index.vue?t=1711633580756 +0ms
connect:dispatcher viteBaseMiddleware : /_nuxt/pages/.../index.vue?t=1711633580756 +0ms
connect:dispatcher viteHMRPingMiddleware : /_nuxt/pages/.../index.vue?t=1711633580756 +0ms
connect:dispatcher handle : /_nuxt/pages/.../index.vue?t=1711633580756 +0ms
connect:dispatcher viteTransformMiddleware : /_nuxt/pages/.../index.vue?t=1711633580756 +0ms
connect:dispatcher viteTimeMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
connect:dispatcher viteCachedTransformMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
connect:dispatcher viteBaseMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
connect:dispatcher viteHMRPingMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
connect:dispatcher handle : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
connect:dispatcher viteTransformMiddleware : /_nuxt/assets/css/tailwind.css?t=1711633580756 +0ms
vite:load 0.33ms [fs] /pages/.../index.vue +31s
vite:load 11.03ms [fs] /assets/css/tailwind.css +10ms
2:46:20 PM
Source path: /Users/.../assets/css/tailwind.css 2:46:20 PM
Finding changed files: 67.255ms 2:46:20 PM
vite:cache [memory] /node_modules/.cache/vite/client/deps/vue.js?v=5c6132d7 +16s
vite:cache [memory] /components/.../....vue +1ms
vite:cache [memory] /components/.../....vue +0ms
vite:cache [memory] /composables/use-I18n.ts +0ms
vite:cache [memory] ../../node_modules/.pnpm/nuxt@3.11.1_@parcel+watcher@2.1.0_@types+node@20.9.0_@unocss+reset@0.58.7_eslint@8.41.0_float_toadio74hgnvq2wmrroqs3y4iy/node_modules/nuxt/dist/pages/runtime/composables.js?v=5c6132d7 +0ms
vite:cache [memory] /stores/.../....ts +0ms
vite:cache [memory] ../../node_modules/.pnpm/@nuxt+devtools@1.0.4_nuxt@3.11.1/node_modules/@nuxt/devtools/dist/runtime/function-metrics-helpers.mjs?v=5c6132d7 +0ms
vite:cache [memory] /node_modules/.cache/vite/client/deps/@unhead_vue.js?v=5c6132d7 +0ms
vite:cache [memory] ../../node_modules/.pnpm/@vueuse+core@10.5.0_vue@3.3.8/node_modules/@vueuse/core/index.mjs?v=5c6132d7 +0ms
vite:cache [memory] /types/filters.ts +0ms
vite:cache [memory] plugin-vue:export-helper +0ms
vite:cache [memory] /types/.../....ts +0ms
vite:cache [memory] /types/firebase.ts +0ms
vite:hmr [self-accepts] pages/.../index.vue +136ms
vite:import-analysis 1.35ms [13 imports rewritten] pages/.../index.vue +31s
vite:transform 110.11ms /pages/.../index.vue +31s
vite:time 110.73ms /pages/.../index.vue +16s
Reading changed files: 24.275ms 2:46:20 PM
Sorting candidates: 0.033ms 2:46:20 PM
Generate rules: 0.179ms 2:46:20 PM
Build stylesheet: 0.001ms 2:46:20 PM
Potential classes: 101 2:46:20 PM
Active contexts: 1 2:46:20 PM
JIT TOTAL: 114.074ms 2:46:20 PM
2:46:20 PM
vite:hmr [self-accepts] assets/css/tailwind.css +101ms
vite:import-analysis 0.72ms [0 imports rewritten] assets/css/tailwind.css +101ms
vite:transform 198.06ms /assets/css/tailwind.css +98ms
vite:time 208.91ms /assets/css/tailwind.css +99ms
vite:time 210.15ms /assets/css/tailwind.css +0ms
[nitro] types:extend: 0.011ms 2:46:21 PM
[nitro] rollup:reload: 231.992ms 2:46:21 PM
✔ Nitro config hot reloaded! 2:46:21 PM
[nuxt] builder:watch: 253.588ms 2:46:21 PM
✔ Nuxt Nitro server built in 521 ms nitro 2:46:21 PM
[nitro] compiled: 0.212ms 2:46:21 PM
[nitro-runtime] close: 0.023ms
ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:50943 2:46:21 PM
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)
この場合、何を試せばいいのでしょうか。
#25115も関係があるように思います。
同じです。
同じです。
なぜ根本的な解決策が示されていないのにissueがclosedになっているの?
なぜ根本的な解決策が示されていないのにissueがclosedになっているの?
数か月同じことを考えている。
NuxtチームはNitroが原因だと思っているようだ
以下のurlに再現リポジトリを作成しました。
stackblitzでは動きませんでした。
恐らく、electronウィンドウとセキュリティの問題だと思います。
時間を割いて再現してくれてありがとう。
補足として、私たちはnuxt-electron
を利用しない再現方法を持っています。
これまでの回答から、Electronとは必ずしも関連しないセットアップがあるようなのでNuxt自体の問題のように見えます。
以下のような関連したIssuesがあるようです。
#24355
#25115
#26396
nuxt/image#1158
nuxt/cli#335
nuxt/cli#338
nuxt/cli#346
caoxiemeihao/nuxt-electron#71
これまでの回答から、Electronとは必ずしも関連しないセットアップがあるようなのでNuxt自体の問題のように見えます。
そうです、この問題はnuxt-electron
と関係した問題ではなく、Nuxtの自体の問題である
数ヶ月前、カスタマイズやプラグインを一切使わない超シンプルなプロジェクトを行いました。
nuxt、vue、vue-router(デフォルトでインストールされている)だけです。
あるのは、文字列を出力してコンソールにカウントを追加する3998個の超シンプルなコンポーネントだけです。
npm run dev
で確実にERROR [unhandledRejection]
が発生しました。
ERR_CONNECTION_REFUSED In a large application in dev mode nuxt/cli#335にメンションされました。
何か進展はありましたか?
私も新たな情報を待っています。
未だに問題は残っています。
同じです。
ブラウザを更新するたびに発生します。
ブラウザを更新するたびに発生します。
このエラーのせいでHMRが機能しません。
開発中はいつも手動でリフレッシュしています。
メンション失礼します。
関連しているかどうかはわかりませんが、以下のエラーが発生しています。
[unhandledRejection] XXX is not defined
XXX
はグローバルなJSライブラリです。
以下が再現手順です。
1 Nuxt(v3.11.2)プロジェクトを作成
2 (Stripe API等の)グローバルなJSライブラリを登録
...
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
script: [
{
'hid':'stripe',
'src':'https://js.stripe.com/v3/',
'defer': true
}
]
},
},
3 ページからAPIを呼び出す
<script setup>
let isStripe = () => {
if (Stripe) {
return new Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
}
return false;
};
</script>
<template>
<div>
<h1 v-if="isStripe()">ok</h1>
<h2 v-else>No</h2>
</div>
</template>
※libのロード中もアプリは動作し続けますが、Nitroがエラーを検出しているようです。
その場合、新たなIssuesを開く必要があるかを教えてください。
関連しているかどうかはわかりませんが、以下のエラーが発生しています。
これはサーバー上で有効なコードではありません。
if (import.meta.client)
でラップするか、typeof Stripe
でチェックするか、grobalThis.Stripe
にアクセスします。
ありがとう、ClientOnlyが適切なチェック方法だと思っていたのですが、それはクライアント側だけの話であって、サーバー側でNuxtを書くのに慣れるにはもう少し時間が必要です!
その点を把握するために、今ここであなたのメモに出会いました。
この件について、更新情報をいただけますか?
コアチームの誰かが近いうちにこの問題を調査してくれるのでしょうか、それともコミュニティで独自に回避策を見つけるべきでしょうか?
回答いただけると幸いです。
アップデート後もまだ問題があります。
最初の npx nuxi@latest upgradeではnuxt@3.11.2にアップデートされなかったため、pnpm up nuxt --latestを利用して手動でアップデートしたところ、この問題が発生しています。
Same error
- Operating System: Windows_NT
- Node Version: v18.18.2
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: npm@9.8.1
- Builder: -
- User Config: ssr, electron, content, components, imports, css, app, build, modules, vite, nitro, devtools
- Runtime Modules: (), nuxt-electron@0.7.0, @nuxt/content@2.12.1, @pinia/nuxt@0.5.1
- Build Modules: -
いくつか解決策の片鱗を見つけたので試してみる
devProxyを上書き
以下を追加してみる。
nitro: {
devProxy: {
host: 'localhost',
},
},
なおらない。
devProxyを直リンクで上書きする
export default defineNuxtConfig({
// ... nuxt config
nitro: {
devProxy: {
host: '127.0.0.1',
},
},
})
なおらない。
nuxt@3.6.5に下げてみる
手順
- package.jsonのnuxtを3.6.5に設定
- node_modulesを削除
-
npm install
実行 -
npm run dev
実行
正常に動作した。が、依存関係に脆弱性があるという警告が出た。
脆弱なバージョンのviteに依存しています
脆弱なバージョンの@nuxt/vite-builderに依存しています
Nuxi 3.6.5 1:08:46
✔ Types generated in .nuxt 1:08:49
added 853 packages, and audited 855 packages in 54s
140 packages are looking for funding
run `npm fund` for details
3 high severity vulnerabilities
To address all issues, run:
npm audit fix --force
Run `npm audit` for details.
$ npm audit
# npm audit report
vite 4.0.0 - 4.5.2
Severity: high
Vite dev server option `server.fs.deny` can be bypassed when hosted on case-insensitive filesystem - https://github.com/advisories/GHSA-c24v-8rfc-w8vw
Vite's `server.fs.deny` did not deny requests for patterns with directories. - https://github.com/advisories/GHSA-8jhw-289h-jh2g
fix available via `npm audit fix --force`
Will install nuxt@3.11.2, which is outside the stated dependency range
node_modules/vite
@nuxt/vite-builder 3.1.0 - 3.6.5
Depends on vulnerable versions of vite
node_modules/@nuxt/vite-builder
nuxt 3.1.0 - 3.6.5
Depends on vulnerable versions of @nuxt/vite-builder
node_modules/nuxt
3 high severity vulnerabilities
これを見るに、解決されていなさそう。
HMRを無効にするという手段も視野に入れるべきか。
翻訳
Strange loop
完全に動作しているNuxtアプリケーションにnuxt-electronを追加したところ、Nuxtが読み込まれた後奇妙なループが始まり、ブラウザのNuxtが常に再起動し、ターミナルとブラウザコンソールに大量のエラーが表示されます。
そこで、フレッシュなNuxtアプリケーションを作成してnuxt-electronを追加しましたが、同じ問題が発生しました。
Electronをv30からv28にダウングレードしても同じ結果でした。
同じエラーに遭遇しています。
私も同じ問題に直面しており、nuxtのソースコードのバグを探しています。
現環境ではnuxtの起動ポートは3000がデフォルトですが、nuxt-electronのフック内ではランダムポートになってしまっており、これが無限ループに陥る原因になります。
-
nuxt-electronフック
https://github.com/caoxiemeihao/nuxt-electron/blob/9661c57047bee1609a036f9ce2cd8230b532d592/src/index.ts#L110 -
console.log(==== listhenOptions.port ====: port) の位置
https://github.com/unjs/listhen/blob/v1.7.2/src/listen.ts#L102
現在、一時的には以下の方法で回避することができる
{
"scripts": {
- "dev": "nuxi dev",
+ "dev": "nuxi dev --no-fork",
"build": "nuxi build --prerender && electron-builder"
}
}
現在、一時的には以下の方法で回避することができる
ありがとうございます、後ほど試してみます。
更新
devのscriptsを変更しましたがエラーは続いています。
しかし、Nodeの代わりにBunのランタイムスクリプトで実行するとすぐに高速で動作します。
現在、一時的には以下の方法で回避することができる
ここに来る人のために言及するが、これは正常に動作した。
Bunは利用していない。
pnpmに切り替えても問題が継続しました。
pnpm installとpnpm run dev --no-forkを実行しました。
追記:pnpmをv8からv9にアップグレードし、最新のNuxtの依存関係をインストールするためにpnpx nuxi upgrade -fを実行しました。
その後、pnpm run devを実行しましたが、これは"dev": "nuxt dev --no-fork"を指しています。同じエラーが発生しています。
Hmmm... the loop is gone... new error:
nuxt3.6.5にダウングレードしたらすべてうまくいきました。
この問題はNuxtではなく、nuxiの変更によるものである。(nuxiはNuxtとは別にバージョン管理され、別個に開発されている)
nuxiのバージョンをダウングレードすることは可能でしょうが、そのレポには、何が起きているのかを説明し、それを回避するためのヒントを与えてくれるいくつかの問題があることに注意してください。
nuxt3.6.5にダウングレードしたらすべてうまくいきました。
nuxt3.6.5にダウングレードしたらうまくいった!
ありがとう
現在はいくつかのパッケージをダウングレードしないと使えません。
--no-fork
フラグは私には機能しなかったが、今後のアップデートに期待してコメントする。
現在はいくつかのパッケージをダウングレードしないと使えません。
あなたもnuxtを3.6.5にダウングレードすると動くように思います。
あなたもnuxtを3.6.5にダウングレードすると動くように思います。
申し上げたように、私はNuxtとほかのライブラリの両方の新しいバージョンに依存しています。
このあとも...
nuxi dev --no-fork
で無限リロードはなくなった
しかし、別のエラーが発生している。
ERROR [unhandledRejection] Must provide a proper URL as target 5:44:14
at ProxyServer.ws (/D:/Zenn/playground/nuxt-electron/node_modules/httpxy/dist/index.mjs:521:9)
at Object.upgrade (/D:/Zenn/playground/nuxt-electron/node_modules/nitropack/dist/chunks/server.mjs:374:24)
at Server.<anonymous> (/D:/Zenn/playground/nuxt-electron/node_modules/nuxi/dist/chunks/dev2.mjs:6902:29)
at Server.emit (node:events:531:35)
at onParserExecuteCommon (node:_http_server:939:14)
at onParserExecute (node:_http_server:840:3)
また、数回に一度起動時やHMR時にブラウザに何も描画されなくなり、大量のエラーが発生する。
ところで、--no-fork
が何もわからないので深掘りする。
ここで実装されている。
もっと詳しく見てみると、
forkがtrueのとき(nodeのデフォルト)
- _createDevProxyを実行
- _startSubprocessを実行
- _createDevProxyの結果のlistenerを返却
forkがfalseのとき(--no-fork)
- ../utils/devのcreateNuxtDevServerを実行
- createNuxtDevServerの結果のinitを実行
- createNuxtDevServerの結果のlistenerを返却
差を端的に言えば、プロキシを利用するか否かという感じだと思う。
forkがtrueの時は使う、falseの時は使わない。
ERROR [unhandledRejection] Must provide a proper URL as targetを解決する
--no-forkを利用し、electronが(一応は)利用可能になったが、まだエラーが出ている。
これの解消も目指したい。
※再掲
ERROR [unhandledRejection] Must provide a proper URL as target 5:44:14
at ProxyServer.ws (/D:/Zenn/playground/nuxt-electron/node_modules/httpxy/dist/index.mjs:521:9)
at Object.upgrade (/D:/Zenn/playground/nuxt-electron/node_modules/nitropack/dist/chunks/server.mjs:374:24)
at Server.<anonymous> (/D:/Zenn/playground/nuxt-electron/node_modules/nuxi/dist/chunks/dev2.mjs:6902:29)
at Server.emit (node:events:531:35)
at onParserExecuteCommon (node:_http_server:939:14)
at onParserExecute (node:_http_server:840:3)
エラーの内容を読むと、httpxyにちゃんとしたURLがわたっていないらしいことが書いてある。
このhttpxy
はunjsのパッケージらしい。
http-party/node-http-proxyからフォークされたNodejs用HTTP, WebSocketプロキシ
あまりにあたりが付けられず、打つ手が見つけられない。
I found that the nuxt startup port is 3000 by default, but in the hooks of nuxt-electron, I always get a random port,
これが原因なのか?とも思うが、うーーん。
もしこれが原因なのならば、どうしようもないんかな。
まず、properではないURLというのが何なのかわからない。
ちょっと整理すると、
- これはhttpxyの
ProxyServer.ws
(?)で発生している - httpxyはnode-http-proxyをフォークしたもの
-
Must provide a proper URL as target
というエラーメッセージはnode-http-proxyにもあるっぽい
http-node-proxyのREADMEを見てみると、ProxyServer.ws()
は恐らくWebSocketのリクエストをプロキシしているらしいことがわかる
also you can use
proxy.ws()
to proxy a websockets request
httpxyのコードを見てみると、
- プロキシサーバーを作るときに、送信先が指定されていないときに吐くエラー
- 露出しているのは(READMEを見る限り恐らく)
createProxyServer()
で、そこで上記のクラスをインスタンス化している。つまり、createProxyServer()
の返り値にチェインしてwsとかが実行できる(はず...)
createProxyServerを実行しているところを探してみる。
- nuxt-electron: なし
- nuxt/nuxt: なし
- nuxt/cli: あった
使っているところは以下。
これを見ると、(正しい)address
がセットされていないのが原因か。
ただ、--no-fork
ってプロキシを使わない起動方法って感じではないのか?
使わないはずなのに使ってしまっているため、addressに何もセットされていないよって怒られている?
こっちの実装ももう少し詳しく見てみよう
nuxiのバージョンを下げて実行してみる
Issuesでのバージョン(v3.11.0, v3.10.1, v3.10.0)だと変わらなかった。
nuxt自体のバージョンを下げるのをお勧めするのは厳しそうだけど、cliだけならいいかなと思うので、いくつか試してみる。
あなたもnuxtを3.6.5にダウングレードすると動くように思います。
とのことなので、それに対応するnuxiのバージョンまで下げて実行してみる。
3.7以前はnuxiは切り出されていない?っぽいので、これを指定してみる。
commitでのnuxiのバージョンも3.6.5になっているので多分大丈夫な気がする。
"scripts": {
- "dev": "nuxt dev",
+ "dev": "npx nuxi@3.6.5 dev",
}
--no-fork
なし
連続リロードとread ECONNRESETエラーが発生。
--no-fork
あり
Must provide a proper URL as targetのエラーが発生。
連続リロードはなし。
変わらず...。