Ошибка при компиляции Next Js с использованием next-pwa - веб-загрузчик

Question

Мое следующее приложение JS работает очень хорошо, но я хотел еще улучшить его, превратив в PWA.

Я установил пакет Next-pwa и приложение сборки для этого, но у меня ошибка в браузере.

Вот ошибка:

Я следовал следующему руководству => tuto link

Я новичок в использовании веб-работников. Думаю, мне нужно настроить решение для изображений, но я не знаю, как это сделать.

Спасибо вам :)

Answer 1

Конфиг, решающий проблему:

// next.config.js
const withImages = require('next-images');
const withPWA = require('next-pwa');
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([
    [withPWA, {
    pwa: {
    dest: 'public',
    runtimeCaching: [
        {
        urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-font-assets',
        expiration: {
        maxEntries: 4,
        maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
        }
        }
        },
        {
        urlPattern: /.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-image-assets',
        expiration: {
        maxEntries: 64,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:js)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-js-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:css|less)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-style-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:json|xml|csv)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-data-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.*/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'others',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        }
        ]
        },
    }],
    [withImages],
    ]);