【Nuxt.js】Safariでホットリロードが無限ループする問題　俺用メモ！

どうも！きよです！

最近ちょっとポートフォリオを作ろうと思って、

やったことのないNuxt.jsを使おうとしたんです。

そしたらまあ初っ端から詰まったので、

備忘録に記事書いておきます。。

 

環境

・safari 12.1.1 (14607.2.6.1.1)

・Nuxt  @nuxt/cli v2.9.1

 

ディレクトリ構造

プロジェクトフォルダ
　┝ .nuxt/
　┝ assets/
　┝ components/
　┝ layouts/
　┝ middleware/
　┝ node_modules/
　┝ pages/
　┝ plugins/
　┝ static/
　┝ store/
　┝ nuxt.config.js
　┗ package.json 
...＠略

問題点

SSRってなによ！って感じなんですけど、

ちょっとやってみたかったので、SSRでプロジェクト作成して、

npm run dev

でサーバー建てました。

localhost:3000

でアクセスできるらしいので、

アクセスしたら表示されました！

 

えっ！簡単！

それでじゃあ画面作っていくか！

と思って、下記を見てみると

https://nuxtjs.org/guide/routing

どうやらpagesに.vueファイルを作成すれば、

勝手にルーティングしてくれるらしいではありませんか！！

すげー！！と思って何も気にせず、

pages/index.vueをコピーして、ファイル名変更して

ブラウザを見てみたら、

無限にリロードされてるじゃありませんか！！！

下記みたいな感じで無限にリロードしてるんです。

 

githubより引用

でも、世の中にはちゃんと解決してくれてる人がいるんですね！！

こちらにissueがありました。

https://github.com/nuxt/nuxt.js/issues/3828

僕英語読めないんで、ふんわり解釈したのが、

どうやらsafariのバグらしい？w

そして解決策はこちら。

https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-464675623

https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-510368499

filenamesを修正してください、みたいな内容っぽい？？

ので、nuxt.config.jsに下記を追加しました。

filenames: {
  app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js',
  chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js'
},

一応ホットリロードの無限ループは治まりました！

これで、先に進めます。。

 

まとめ

nuxt.config.jsに下記を追加。

build: {
    /*
    ** You can extend webpack config here
    */
    filenames: {
      app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js',
      chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js'
    },
    extend (config, ctx) {
    }
  }

 

メモリーリークが発生する可能性があるみたいなので、注意してくださいね！

詳しい方いらっしゃいましたらぜひツイッターやコメントで解説お願いします！！

それでは！