Nuxt.js

【Nuxt.js】dev や build スクリプト実行時、Client Bundle が 95%(nuxt-pwa-icon)で止まってしまう場合の対処法

Nuxt.js build が nuxt-pwa-icon で止まってしまう - eyecatch

発生条件

以下の条件で発生しました。

  • @nuxtjs/pwa モジュールをインストールしている
  • @nuxtjs/pwa のバージョンが 3.0.0-0
  • nuxt.config.js の modules に '@nuxtjs/pwa' を指定している
  • static ディレクトリに icon.png という名称の画像ファイル(サイズ 512*512以上)が配置されている

つまり、Nuxt PWA の Get Started に記載のとおりセットアップを行って npm run dev を実行したり、create-nuxt-app で pwa を選択した場合に発生します。

この不具合は、開発モードでしか発生しないようです。
参考:PWA cause live site to stuck on loading files/api calls

対処法

  1. node_modules/@nuxtjs/icon/.cache を削除する
  2. @nuxjs/pwa のバージョンを、3.0.0-beta.1 以上に更新する

まず、node_modules/@nuxtjs/icon/.cache フォルダを削除します。

続いて、次のコマンドを実行して @nuxtjs/pwa モジュールのバージョンを 3.0.0-beta.1 に更新します。

yarn add @nuxtjs/pwa@3.0.0-beta.1

下記参考記事 2 によると、当不具合はキャッシュが関係するものらしく、@nuxtjs/pwa 3.0.0-beta.1 で改善されたとのことなので、3.0.0-beta.1 以上のバージョンであればOKです。

参考記事

  1. PWA cause live site to stuck on loading files/api calls
  2. Hot Reload make page not load anything till restart of server

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA