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

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

1 Nuxt Fatal Error Error: getaddrinfo ENOTFOUND
2 nuxtでhot-update.json timed out
3 An error occurred while rendering the page. Check developer tools console for details
4 error Unexpected require, please use import instead
5 nuxtやfirebase、デザインの学習

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ファイルに入っている必要があります。光回線などルーターの場合はローカルホストの処理があるため初期設定でも問題は起きにくいです。

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

【光コラボの工事費無料】違約金なし光回線おすすめ比較5社!解約金なしで安いのは?

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

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.config.js を require してるけどこれだと読み込めなくて import する必要があった。
なぜかエラー抑制してるから小一時間気づかなかった。https://t.co/7AFmE8Mn6yエンドツーエンドテスト
— きじとら (@kijtra) September 5, 2019

ES6 の export default と CommonJS の module.exports は等価だと思っていたけど、import側がimportではなくCommonJS の requireを使用している場合、const config = require(‘../nuxt.config.js’).default のようにdefaultを付けなければならない。
— bdm (@bdm_gis) June 26, 2021