Error in NextJs compilation using next-pwa - web loader

Question

My nextJS application works very well but I wanted to improve it further by turning it into a PWA.

I have installed the Next-pwa package and the build application for this, but I have an error in the browser.

Here's the error:

I followed the following tutorial => tuto link

I am a novice in the use of web-workers. I think I need to set up a solution for the images but I don't know how to do it.

Thanks to you :)

Answer 1

The config that solve the problem :

// 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],
    ]);