Next PWA breaks image loading

Question

I have a site with a blog where i what to be able to send notifications when a new blog post is posted. Therefore I wanted to make the website a PWA. I found the next-pwa library and implemented it successfully. Except when I built/deployed to Vercel the images couldn't be loaded. I get the following error for all the images:

www.example.com/:1 GET https://www.exampel.com/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Feample.appspot.com%2Fo%2FimagePath.jpg%3Falt%3Dmedia%26token%4e1a-8e60-8c1058fa0993&w=256&q=75 400

I also get an error for googletagmanager and vercel insights:

workbox-4f8070a3.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://www.googletagmanager.com/gtag/js?l=dataLayer&id=G-WWGHCNEQG4"}]
    at v.D (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:22182)
    at async v (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:7597)

What I am thinking based on some google searches is that the PWA messes up the image optimization in someway. So I am asking if there is anyway to solve this, ideally with keeping the image optimization?

Here is the next.config.js:

/** @type {import('next').NextConfig} */

const withPWA = require("next-pwa")({
  dest: "public",
});

const nextConfig = {
  productionBrowserSourceMaps: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "firebasestorage.googleapis.com",
        port: "",
      },
    ],
  },
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: ["./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

module.exports = withPWA({
  nextConfig,
});

Here is the manifest.json

{
  "name": "Long name",
  "short_name": "Name",
  "theme_color": "#d23022",
  "background_color": "#fafafa",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "media/icons/maskable_icon_192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
        "src": "media/icons/maskable_icon_384x384.png",
        "sizes": "384x384",
        "type": "image/png"
      },
    {
      "src": "media/icons/maskable_icon_512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "splash_pages": null
}

Answer 1

Solved the problem after 3 hours by removing the curly brackets around nextConfig. So it should look like this:

module.exports = withPWA(
  nextConfig
);

But the problem with Google Tag Manager isn't solved though.