プログラミング学習

【Nuxtエラー】getaddrinfo ENOTFOUND/hot-update.json timed out

プログラミング学習

nuxtのホスト絡みやポート番号絡みのちょっと厄介なエラーまとめです。nuxtのエラーをめもがてら残しているページです。

Nuxt Fatal Error Error: getaddrinfo ENOTFOUND

Nuxtを使っているとよくでるgetaddrinfo ENOTFOUNDのエラーの解決方法です。

Nuxt Fatal Error Error: getaddrinfo ENOTFOUND ローカルホスト名

このエラーは何回も起きたことがあります…^^;。いろいろな原因でおきたため適当に加筆しています。

初歩としてネットワークが切れている。インターネットが繋がっているかを確認しましょう。

localhostを追加する。
Macの場合、/private/etc/hostsです。

Macでhostsファイルを書き換える方法 | HAZIMARU

このエラーはWifi環境の場合によくでます。Wifi環境の場合、ローカルホスト名がしっかりとhostsファイルに入っている必要があります。光回線などルーターの場合はローカルホストの処理があるため初期設定でも問題は起きにくいです。

余談ですが光回線は契約縛りがないものがおすすめです。

また、ローカルホスト名は厄介なことに勝手に変わることがあるようです。この場合も同じエラーがでます。

hostsの設定は次のような感じです。

127.0.0.1 MacBook-Pro
127.0.0.1 MacBook-Pro.local
127.0.0.1 MacBook-Pro.lan

名前はエラーが表示されているとき、表示されている名前でOKです。上記の場合、MacBook-ProとMacBook-Pro.localとMacBook-Pro.lanが名前です。増えていきました。

ぐぐったらfirebaseの料金プランを変えよう(個人的にはない)。

別のケースで半月ぶりにプロジェクトを動かしたらローカルホストの名前が変わっていたのです。。

http://macbook.localhost:3000/

http://macbook.lan:3000/

いったん、応急処置でこの場合はfirebaseにローカルホストを追加してあげました。

スポンサーリンク

nuxtでhot-update.json timed out

このエラーは厄介です。nuxtで1番引きずっているエラーかもしれません。nuxt3に変えれば解決するのかな。。

よい解決方法があればコメント欄で教えてもらいたいぐらいです。

bootstrap:91 Uncaught (in promise) Error: Manifest request to /_nuxt/9e79fa2e96c521c45443.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange (bootstrap:91)

このエラーがでると再読み込みしても更新されません。nuxtででるんですが、nuxtのエラーではないようです。

エラーがでるとnpm run devしなおしてもまたエラーがでます。いろいろやったのですが、簡単で有効な手段としてポート番号を変え、npm run devすればいいです。

  "scripts": {
    "dev": "nuxt --port 3330",
  },

ただ、またでることがあって厄介です。またポート番号を変えます。

しかし、応急処置にすぎず、またしばらくすると同じエラーがでる場合があります(調子がよい場合もあります)。

  "scripts": {
    "dev": "nuxt --port 3331",
  },

そしたらまた他の番号にします。PCの再起動では改善されません。

ネット環境が変わったときにでる気もします(?)ので、発生の法則をつかめるといいかもしれません。でなければ作業を妨害しないので。

スポンサーリンク

An error occurred while rendering the page. Check developer tools console for details

久々に触ったページでリンクが飛べなくなっていました。リンクで_idに飛ぶページです。コピペでして無理やり飛ぶもページが読み込まれずエラーがでました。

ぐぐったところnuxtのリンク絡みでエラーがでている人を確認。あれこれやってもなおらず、ちょっとよくわからないのですが、起動しなおしたらなおりました。

An error occurred while rendering the page. Check developer tools console for details

覚書程度に残しておきます。

スポンサーリンク

error Unexpected require, please use import instead

error  Unexpected require, please use import instead

eslintで他のページをチェックするとき、はじめて表示されたため気付くのが遅れました。

素直に修正するとimportにするだけど、defaultをつけても回避できるようです。

const path = require('path').default
const PrerenderSPAPlugin = require('prerender-spa-plugin').default

or

const path = import('path')
const PrerenderSPAPlugin = import('prerender-spa-plugin')
スポンサーリンク

nuxtやfirebase、デザインの学習

プログラミングはUdemyの学習がおすすめです。おすすめをまとめました。

プログラミングより絵の方が詳しいかもなので、デザインもまとめてあります。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました