nuxtのホスト絡みやポート番号絡みのちょっと厄介なエラーまとめです。nuxtのエラーをめもがてら残しているページです。
目次
Nuxt Fatal Error Error: getaddrinfo ENOTFOUND
Nuxtを使っているとよくでるgetaddrinfo ENOTFOUNDのエラーの解決方法です。
Nuxt Fatal Error Error: getaddrinfo ENOTFOUND ローカルホスト名このエラーは何回も起きたことがあります…^^;。いろいろな原因でおきたため適当に加筆しています。
初歩としてネットワークが切れている。インターネットが繋がっているかを確認しましょう。
localhostを追加する。
Macの場合、/private/etc/hostsです。
このエラーは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 insteadeslintで他のページをチェックするとき、はじめて表示されたため気付くのが遅れました。
素直に修正すると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 する必要があった。
— きじとら (@kijtra) September 5, 2019
なぜかエラー抑制してるから小一時間気づかなかった。https://t.co/7AFmE8Mn6yエンドツーエンドテスト
ES6 の export default と CommonJS の module.exports は等価だと思っていたけど、import側がimportではなくCommonJS の requireを使用している場合、const config = require(‘../nuxt.config.js’).default のようにdefaultを付けなければならない。
— bdm (@bdm_gis) June 26, 2021
nuxtやfirebase、デザインの学習
プログラミングはUdemyの学習がおすすめです。おすすめをまとめました。
プログラミングより絵の方が詳しいかもなので、デザインもまとめてあります。
ご参考になれば幸いです。
コメント