使用next-pwa进行NextJs编译时出错-Web loader

Question

我的nextJS应用程序运行良好，但我想通过将其转换为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],
    ]);