Open26

nuxt electronのエラー全部消す!

petaxa | いちむらゆうまpetaxa | いちむらゆうま

READMEの通りの導入ではエラーが出てしまう!

https://nuxt.com/modules/electron

試行錯誤の過程をすべて記しておく

発生エラー

この状態だと、以下のようなエラー、不具合が発生する

  • 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)
petaxa | いちむらゆうまpetaxa | いちむらゆうま

エラーをかみ砕いてみる

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 ?? "");

ここを深掘りするのがいいと思う

petaxa | いちむらゆうまpetaxa | いちむらゆうま

翻訳

HMR WebSocket "Invalid frame header" error causing continuous page reloads after setting app.baseURL

https://github.com/nuxt/nuxt/issues/26396#issue-2196703348

環境

  • 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: -

再現手順

  1. nuxt.config.jsapp.baseURLをセットする
  2. devモードでアプリケーションを実行する
  3. サービスアドレスへアクセスする
  4. コンソールにエラーが表示され、ページが継続的にリロードされる

バグの詳細

Nuxt3においてbaseURLをセットした後、HMRのWebSocketがInvalid frame headerエラーを投げ、devモードで継続的にページがリロードされる。


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2012223003

これは nuxt/cli#370 によって nuxt v3.11.1 で解決されたと思います。


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2027849364

これは nuxt/cli#370 によって nuxt v3.11.1 で解決されたと思います。

まだ解決されていません


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2027862683

まだ解決されていません

これは問題ありません。
Nuxtの依存関係が更新されていないので、Nuxiを手動でインストールする必要があります。


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2027891543

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からメンションされました


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2094102609

アップデート後もまだ問題があります。
最初の npx nuxi@latest upgradeではnuxt@3.11.2にアップデートされなかったため、pnpm up nuxt --latestを利用して手動でアップデートしたところ、この問題が発生しています。


https://github.com/nuxt/nuxt/issues/26396#issuecomment-2109180436

2024/03/14
この問題は未だ解決していません。

petaxa | いちむらゆうまpetaxa | いちむらゆうま

翻訳

ERROR [unhandledRejection] write after end

https://github.com/caoxiemeihao/nuxt-electron/issues/71

このパッケージは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)

https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2013937871

同じ問題を抱えています。
quick-startすら起動しません。


https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2030067669

nuxt/nuxt#26396が原因であることは間違いないだろう。
実際には直っていないが...
(Issueは直っているということでCloseされていることから)


https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2030116227

このバグはnuxtもしくはnuxi(どちらかわかりませんが)の古いバージョンでは存在しませんでした。
古いバージョンを利用することでこの問題を回避できます。
私の場合、nuxt: 3.10.2そしてnuxi: 3.10.1を使用していました。
古いバージョンのnuxiを強制的にインストールするには、package.jsonにoverrides(npmの場合)またはresolutions(yarnの場合)を追加します。
そうすることで動くはずです。


ERROR [unhandledRejection] read ECONNRESET nuxt/nuxt#23832にメンションされました。


https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2061583675

Nuxt core teamはこのIssuesを解決できる準備が整っていないようです。
どなたか修正案や回避策をご存じですか?


https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2063023897

このバグはnuxtもしくはnuxi(どちらかわかりませんが)の古いバージョンでは存在しませんでした。
古いバージョンを利用することでこの問題を回避できます。

nuxtを3.6.5にダウングレートしたらすべてうまくいきました。
また、最新のquick-startも試すことができます。


https://github.com/caoxiemeihao/nuxt-electron/issues/71#issuecomment-2124734271

#74 (comment)
この方法で修正されました。
しかし、これはパッケージ自体で処理されるべきです。

petaxa | いちむらゆうまpetaxa | いちむらゆうま

ERROR [unhandledRejection] read ECONNRESET

https://github.com/nuxt/nuxt/issues/23832

環境

  • 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)

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1773335310

カスタムHMRポートはありますか?
41119はNuxt開発サーバーのメインポートですか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1773506049

これは再現が非常に難しく、ローカル環境設定のどこかに問題があるように思います。
また、こちら側ではカスタム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: -

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1774207589

同じ問題を経験しています。
node-rfcというパッケージを使用しているのですが、これが問題の根本原因のようです。
このモジュールにはC++のコードバインディングが含まれており、ホットリロードを試みるとアプリケーション全体がクラッシュしてしまうのではないかと疑っています。
私の経験では、HTTPサーバー自体はクラッシュしませんが、完全にフリーズします。
ポートのリスニングは続けるものの、リクエストには一切応答しなくなります。
時間ができて、最小限のプロジェクトで問題を再現できたら新しい問題を作成しようと思っていましたが、この記事を見つけたのでコメントを残します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1774207960

最も重要な点を言い忘れていました。
サーバーを最初に起動したときはコードは正常に動作しますが、変更を加えて保存するたびにフリーズします。
ただし、フリーズするのはサーバー側で変更を加えたときだけで、クライアント側での変更ではフリーズしません。

変更を加えるたびにCtrl+Cで停止して再起動するのは非常に煩わしいです。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1774222020

最小限のプロジェクトで問題を再現することに成功しました。しかし、注意すべき点は、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/にコピーすると解決します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1777666251

@danielroe

このエラーが開発中に発生し、エラーの正確な瞬間をとらえることができないため再現を行うことは不可能です。
また、カスタムポートは使用しておらず、デフォルトのNuxtConfigurationで作業しています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781310742

これはDBコネクションのあるプロジェクトで起こっていることのように思います。
皆さんはプロジェクトでDB接続をしていますか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781343597

これは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)
}

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781370920

これは、v3.7.0まではうまく動作していたため、Nitro2.6アップデートに関係しているのではないかと思います。

私はバージョン3.7でもこのエラーが発生していましたが、DBが疑わしいと思っていたため興味を持っていませんでした。
現在、3.8でも同じエラーが発生しています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781391747

この問題はnitroがunjs/httpxyに変更したことが原因ではないですか?
これは3.7.0がリリースされたのと同じころのもののようです。
unjs/nitro@dd8101f

また、エラーの発生源は以下のようです。
https://github.com/unjs/httpxy/blob/1f62fffb141e905a398f55eb34bd75366082ca3c/src/middleware/web-incoming.ts#L122


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781414617

この問題の解決策を見つけました。
以下のNuxt cofigを追加してみてください。
私の環境では何度かリフレッシュしてもタイムアウトが発生しなくなりました。

nitro: {
  devProxy: {
    host: 'localhost',
  },
},

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781453195

以下のNuxt cofigを追加してみてください。
私の環境では何度かリフレッシュしてもタイムアウトが発生しなくなりました。

私の環境では動きません。
サーバーサイドのコードを更新するたび、問題が発生します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781480103

私の環境では動きません。

localhostをデフォルトポートで使っていますか?
あなたのエラーはnodeに対するエラーのようです。
そして、恐らくnode-rfcが関連していそうです。
現在のnodeのバージョンは何ですか?

@productdevbook @castrogarciajs 私の解決法で動作しましたか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781483347

わたしのバージョンは20.9.0です。
nuxtのデフォルトポートを使用しています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781486935

わたしのバージョンは20.9.0です。
nuxtのデフォルトポートを使用しています。

わかりました。
先ほどのnuxt configを追加してもエラーが出たままですか?

nitro: {
  devProxy: {
    host: 'localhost',
  },
},

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781487195

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",

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781492359

もし私のミニマルリプロダクションを確認したい場合はこちらから。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781515447

もし私のミニマルリプロダクションを確認したい場合はこちらから。

node jsのバージョンを20にあげることをお勧めします。
@adam-code-labxの方法で動作したかもしれません。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781535937

node jsのバージョンを20にあげることをお勧めします。

Node v20に変更しましたが、いまだエラーが発生します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1782572668

still ECONNREFUSED error


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1782885973

![image]

うーん、nitroのdevProxyを上書きすればうまくいくはずなのだけど、、、。
nuxt configを見せてもらうことはできますか?
解決するかどうかはわかりませんが、localhostの代わりに127.0.0.1で直接リンクしてみてください。
また、これは設定の最後に追加してください。

export default defineNuxtConfig({
  // ... nuxt config
  nitro: {
    devProxy: {
      host: '127.0.0.1',
    },
  },
})

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1814284849

解決するかどうかはわかりませんが、localhostの代わりに127.0.0.1で直接リンクしてみてください。
また、これは設定の最後に追加してください。

これで解決できたようです。
ありがとうございます。


ERROR [unhandledRejection] read ECONNRESET #24355にメンションされました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1890971256

同じ問題に遭遇しています。

 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',
    },
  },

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1906916100

同じエラーが発生しています。
Nodeをv20にアップグレードし、devProxyの上書きを試しましたがうまくいきませんでした。

 ERROR  [unhandledRejection] connect ETIMEDOUT 127.0.0.1:61144 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)

どなたか教えてください。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1924939942

この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1932172670

Nodeをv20にアップグレードし、devProxyの上書きを試しましたがうまくいきませんでした。

この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。

シンプルアプリケーションで再現できることを確認しました。
問題はリクエスト数のようです。
nuxt@3.6.5では正常に動作しました。
nuxt/cli#335

同じ症状ですか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1932613973

nuxt/cli#335の最後のエラーのみ発生しています。

ERROR  [unhandledRejection] connect ETIMEDOUT 127.0.0.1:61574

at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1932617705

同じ症状ですか?

関連する問題のように思いますが、(少なくとも私は)レンダリングが遅くなるような症状はありません。
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)

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1939420953

この問題の発生をNode v20, Nuxt v3.10.0で観測することができました。

同じ問題があります。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1951368452

そしてエラーは(※一個前のコメント同様に)最後のもののみです。
少しの間(通常は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:    -

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1951781606

そしてエラーは(※一個前のコメント同様に)最後のもののみです。
少しの間(通常は1,2分程度)開発でき、ある時点でファイルを保存しホットリロードを行うとこのエラーが発生します。
同じ問題があります。

これはdevcontainerで開発している際に発見しました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1989773594

同じ問題があります。

- 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',
    },
  },

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1990926147

なぜ彼らがこの問題を無視しているかわかりません...


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1991650302

これは間違いなくnuxtの問題ではない。
恐らくnitroの問題だろう。

純粋なnitroの環境で再現出来たらNitroのissuesに挙げてもらえますか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1991837983

Nuxtのプロジェクト全体をNitroプロジェクトで再現するにはどうすればよいですか?
また、すでにNitroのIssuesに起票した人はいますか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1991875964

これは間違いなくnuxtの問題ではない。

他のissue(nuxt/cli#335)で既に報告した通り、これはnitroだけの問題ではなさそうです。
nuxt@3.6.5をインストールするとNitroのバージョンは最新のNitro@2.8.1のままです。
nuxtとnitroのインタラクトの問題ではありませんか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-1992251044

その場合はnuxt/cliにあるか、cliがnitroとどのようにインタラクトするかによります。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2006623806

同じ問題があります。
Macでnodeの最新のv18とv20を使用しています。
唯一の回避策はnitropackをv2.8.1にダウングレードすることです。
ヒントをありがとうございます。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2006867506

この問題はまだ解決されていないのにこのissuesはclosedになっているんですか?
私のプロジェクトもnode 20.10で最新バージョンにアップグレードしたところ同じ問題に直面しました。

 ERROR  [unhandledRejection] read ECONNRESET

  at TCP.onStreamRead (node:internal/stream_base_commons:217:20)


 ERROR  [unhandledRejection] write after end

https://github.com/nuxt/nuxt/issues/23832#issuecomment-2007449985

唯一の回避策は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"
    }
  }
}

https://github.com/nuxt/nuxt/issues/23832#issuecomment-2007498167

環境

Nuxt v3.11.1
Nitro v2.9.4
Node v20.11.1
Operating System: Windows 10
SSR: True

それらがどのように関係しているかはわからないが、Nuxt configでapp.buildAssetsDirの値を設定しないとエラーが出なくなりました。
クリーンインストールも試してみたが、この変数を設定するとエラーが発生します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2007540757

私は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でメンションされました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2010649520

私はapp.buildAssetsDirを設定していません。
つまり、私の場合はこれが原因ではありません。

それを設定しているプラグインはありませんか?
私の場合、nuxt-electronがそれを設定していました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2022661371

私の場合、nuxt-electronがそれを設定していました。

同じ問題があります。
以下が私のconfigです。
"nuxt-electron": "^0.7.0",
"nuxt": "^3.11.1",
"vue": "^3.4.21",

petaxa | いちむらゆうまpetaxa | いちむらゆうま

https://github.com/nuxt/nuxt/issues/23832#issuecomment-2025244665

以下のように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も関係があるように思います。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2027907729

同じです。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2032191238

同じです。
なぜ根本的な解決策が示されていないのにissueがclosedになっているの?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2032206492

なぜ根本的な解決策が示されていないのにissueがclosedになっているの?

数か月同じことを考えている。
NuxtチームはNitroが原因だと思っているようだ


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2032351777

以下のurlに再現リポジトリを作成しました。

https://github.com/JulienChampagnol/ReproduceNuxtElectronError/tree/main

stackblitzでは動きませんでした。
恐らく、electronウィンドウとセキュリティの問題だと思います。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2033965814

時間を割いて再現してくれてありがとう。
補足として、私たちはnuxt-electronを利用しない再現方法を持っています。
これまでの回答から、Electronとは必ずしも関連しないセットアップがあるようなのでNuxt自体の問題のように見えます。

以下のような関連したIssuesがあるようです。

#24355
#25115
#26396
nuxt/image#1158
nuxt/cli#335
nuxt/cli#338
nuxt/cli#346
caoxiemeihao/nuxt-electron#71


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2034005621

これまでの回答から、Electronとは必ずしも関連しないセットアップがあるようなのでNuxt自体の問題のように見えます。

そうです、この問題はnuxt-electronと関係した問題ではなく、Nuxtの自体の問題である


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2034708495

数ヶ月前、カスタマイズやプラグインを一切使わない超シンプルなプロジェクトを行いました。
nuxt、vue、vue-router(デフォルトでインストールされている)だけです。
あるのは、文字列を出力してコンソールにカウントを追加する3998個の超シンプルなコンポーネントだけです。
npm run devで確実にERROR [unhandledRejection]が発生しました。


ERR_CONNECTION_REFUSED In a large application in dev mode nuxt/cli#335にメンションされました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2051172929

何か進展はありましたか?


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2061787391

私も新たな情報を待っています。
未だに問題は残っています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2062883455

同じです。
ブラウザを更新するたびに発生します。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2063036063

ブラウザを更新するたびに発生します。

このエラーのせいでHMRが機能しません。
開発中はいつも手動でリフレッシュしています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2064883622

メンション失礼します。
関連しているかどうかはわかりませんが、以下のエラーが発生しています。

[unhandledRejection] XXX is not defined

XXXはグローバルなJSライブラリです。
以下が再現手順です。

1 Nuxt(v3.11.2)プロジェクトを作成
2 (Stripe API等の)グローバルなJSライブラリを登録

nuxt.config.ts
...
  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を呼び出す

app.vue
<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を開く必要があるかを教えてください。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2064891706

関連しているかどうかはわかりませんが、以下のエラーが発生しています。

これはサーバー上で有効なコードではありません。
if (import.meta.client)でラップするか、typeof Stripeでチェックするか、grobalThis.Stripeにアクセスします。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2065426804

ありがとう、ClientOnlyが適切なチェック方法だと思っていたのですが、それはクライアント側だけの話であって、サーバー側でNuxtを書くのに慣れるにはもう少し時間が必要です!
その点を把握するために、今ここであなたのメモに出会いました。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2078666849

この件について、更新情報をいただけますか?
コアチームの誰かが近いうちにこの問題を調査してくれるのでしょうか、それともコミュニティで独自に回避策を見つけるべきでしょうか?
回答いただけると幸いです。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2094109972

アップデート後もまだ問題があります。
最初の npx nuxi@latest upgradeではnuxt@3.11.2にアップデートされなかったため、pnpm up nuxt --latestを利用して手動でアップデートしたところ、この問題が発生しています。


https://github.com/nuxt/nuxt/issues/23832#issuecomment-2096006993

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: -
petaxa | いちむらゆうまpetaxa | いちむらゆうま

いくつか解決策の片鱗を見つけたので試してみる

devProxyを上書き

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1781414617

以下を追加してみる。

nitro: {
  devProxy: {
    host: 'localhost',
  },
},

なおらない。

devProxyを直リンクで上書きする

https://github.com/nuxt/nuxt/issues/23832#issuecomment-1782885973

export default defineNuxtConfig({
  // ... nuxt config
  nitro: {
    devProxy: {
      host: '127.0.0.1',
    },
  },
})

なおらない。

nuxt@3.6.5に下げてみる

手順

  1. package.jsonのnuxtを3.6.5に設定
  2. node_modulesを削除
  3. npm install実行
  4. 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
petaxa | いちむらゆうまpetaxa | いちむらゆうま

翻訳

Strange loop

https://github.com/caoxiemeihao/nuxt-electron/issues/74

完全に動作しているNuxtアプリケーションにnuxt-electronを追加したところ、Nuxtが読み込まれた後奇妙なループが始まり、ブラウザのNuxtが常に再起動し、ターミナルとブラウザコンソールに大量のエラーが表示されます。
そこで、フレッシュなNuxtアプリケーションを作成してnuxt-electronを追加しましたが、同じ問題が発生しました。
Electronをv30からv28にダウングレードしても同じ結果でした。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2060370291

同じエラーに遭遇しています。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2061097457

私も同じ問題に直面しており、nuxtのソースコードのバグを探しています。
現環境ではnuxtの起動ポートは3000がデフォルトですが、nuxt-electronのフック内ではランダムポートになってしまっており、これが無限ループに陥る原因になります。

different sterted port between nuxt and nuxt-electron

現在、一時的には以下の方法で回避することができる

{
  "scripts": {
-   "dev": "nuxi dev",
+   "dev": "nuxi dev --no-fork",
    "build": "nuxi build --prerender && electron-builder"
  }
}

https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2062327257

現在、一時的には以下の方法で回避することができる

ありがとうございます、後ほど試してみます。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2062461127

更新

devのscriptsを変更しましたがエラーは続いています。
しかし、Nodeの代わりにBunのランタイムスクリプトで実行するとすぐに高速で動作します。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2062479612

現在、一時的には以下の方法で回避することができる

ここに来る人のために言及するが、これは正常に動作した。
Bunは利用していない。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2062766373

pnpmに切り替えても問題が継続しました。
pnpm installとpnpm run dev --no-forkを実行しました。

追記:pnpmをv8からv9にアップグレードし、最新のNuxtの依存関係をインストールするためにpnpx nuxi upgrade -fを実行しました。
その後、pnpm run devを実行しましたが、これは"dev": "nuxt dev --no-fork"を指しています。同じエラーが発生しています。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2062779242

Hmmm... the loop is gone... new error:


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2063022203

nuxt3.6.5にダウングレードしたらすべてうまくいきました。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2063236578

この問題はNuxtではなく、nuxiの変更によるものである。(nuxiはNuxtとは別にバージョン管理され、別個に開発されている)
nuxiのバージョンをダウングレードすることは可能でしょうが、そのレポには、何が起きているのかを説明し、それを回避するためのヒントを与えてくれるいくつかの問題があることに注意してください。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2065437023

nuxt3.6.5にダウングレードしたらすべてうまくいきました。

nuxt3.6.5にダウングレードしたらうまくいった!
ありがとう


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2070028743

現在はいくつかのパッケージをダウングレードしないと使えません。
--no-forkフラグは私には機能しなかったが、今後のアップデートに期待してコメントする。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2070546913

現在はいくつかのパッケージをダウングレードしないと使えません。

あなたもnuxtを3.6.5にダウングレードすると動くように思います。


https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2071160794

あなたもnuxtを3.6.5にダウングレードすると動くように思います。

申し上げたように、私はNuxtとほかのライブラリの両方の新しいバージョンに依存しています。


このあとも...

petaxa | いちむらゆうまpetaxa | いちむらゆうま

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が何もわからないので深掘りする。

petaxa | いちむらゆうまpetaxa | いちむらゆうま

もっと詳しく見てみると、

forkがtrueのとき(nodeのデフォルト)

  • _createDevProxyを実行
  • _startSubprocessを実行
  • _createDevProxyの結果のlistenerを返却

forkがfalseのとき(--no-fork)

  • ../utils/devのcreateNuxtDevServerを実行
  • createNuxtDevServerの結果のinitを実行
  • createNuxtDevServerの結果のlistenerを返却

差を端的に言えば、プロキシを利用するか否かという感じだと思う。
forkがtrueの時は使う、falseの時は使わない。

petaxa | いちむらゆうまpetaxa | いちむらゆうま

ERROR [unhandledRejection] Must provide a proper URL as targetを解決する

https://zenn.dev/link/comments/b80829fe79294b

--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のパッケージらしい。
https://unjs.io/packages/httpxy

http-party/node-http-proxyからフォークされたNodejs用HTTP, WebSocketプロキシ

petaxa | いちむらゆうまpetaxa | いちむらゆうま

まず、properではないURLというのが何なのかわからない。

ちょっと整理すると、

  • これはhttpxyのProxyServer.ws(?)で発生している
  • httpxyはnode-http-proxyをフォークしたもの
  • Must provide a proper URL as targetというエラーメッセージはnode-http-proxyにもあるっぽい
petaxa | いちむらゆうまpetaxa | いちむらゆうま

httpxyのコードを見てみると、

  • プロキシサーバーを作るときに、送信先が指定されていないときに吐くエラー

https://github.com/unjs/httpxy/blob/aaeeaf86c4e3adc36107cd15e29358e37641ab1c/src/server.ts#L152-L163

  • 露出しているのは(READMEを見る限り恐らく)createProxyServer()で、そこで上記のクラスをインスタンス化している。つまり、createProxyServer()の返り値にチェインしてwsとかが実行できる(はず...)

https://github.com/unjs/httpxy/blob/aaeeaf86c4e3adc36107cd15e29358e37641ab1c/src/server.ts#L137-L139

petaxa | いちむらゆうまpetaxa | いちむらゆうま

あなたもnuxtを3.6.5にダウングレードすると動くように思います。

https://github.com/caoxiemeihao/nuxt-electron/issues/74#issuecomment-2070546913

とのことなので、それに対応するnuxiのバージョンまで下げて実行してみる。

https://github.com/nuxt/nuxt/releases/tag/v3.6.5
nuxt v3.6.5のリリース日は2023/07/20らしい。
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のエラーが発生。
連続リロードはなし。
変わらず...。