I have added next-pwa and all the necessary code that goes with it. Here's my next config:

// next.config.mjs

import "./src/env.js";

import withPWA from "next-pwa";

const withPWAConfig = withPWA({
  dest: "public", // Output directory for service worker
  register: true, // Automatically register service worker
  skipWaiting: true, // Activate service worker immediately
  scope: "/app",
  sw: "service-worker.js",
  disable: process.env.NODE_ENV === "development", // Disable in development mode
});

const config = withPWAConfig({
  reactStrictMode: true,
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
});

export default config;

I can run a dev server with no issues. If I remove the pwa stuff the build will work. But when I try to build with pwa config included I get type errors. I can try declaring a global.d.ts to satisfy a type, but then another type will throw, and another, and so on. The build fails immediately at this step:

   Creating an optimized production build ...
> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/<computer>/Documents/Coding/<project>/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/<computer>/Documents/Coding/<project>/public/service-worker.js
> [PWA]   url: /service-worker.js
> [PWA]   scope: /app/
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./public/service-worker.js:1:10
Type error: Property 'define' does not exist on type 'Window & typeof globalThis'.

> 1 | if(!self.define){let e,s={};const n=(n,t)=>(n=new URL(n+".js",t).href,s[n]||new Promise(
...

How can I satisfy Next's type checking?

I have added next-pwa and all the necessary code that goes with it. Here's my next config:

// next.config.mjs

import "./src/env.js";

import withPWA from "next-pwa";

const withPWAConfig = withPWA({
  dest: "public", // Output directory for service worker
  register: true, // Automatically register service worker
  skipWaiting: true, // Activate service worker immediately
  scope: "/app",
  sw: "service-worker.js",
  disable: process.env.NODE_ENV === "development", // Disable in development mode
});

const config = withPWAConfig({
  reactStrictMode: true,
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
});

export default config;

I can run a dev server with no issues. If I remove the pwa stuff the build will work. But when I try to build with pwa config included I get type errors. I can try declaring a global.d.ts to satisfy a type, but then another type will throw, and another, and so on. The build fails immediately at this step:

   Creating an optimized production build ...
> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/<computer>/Documents/Coding/<project>/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/<computer>/Documents/Coding/<project>/public/service-worker.js
> [PWA]   url: /service-worker.js
> [PWA]   scope: /app/
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./public/service-worker.js:1:10
Type error: Property 'define' does not exist on type 'Window & typeof globalThis'.

> 1 | if(!self.define){let e,s={};const n=(n,t)=>(n=new URL(n+".js",t).href,s[n]||new Promise(
...

How can I satisfy Next's type checking?

• typescript
• next.js
• progressive-web-apps

1 Answer 1

try this -

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

module.exports = withPWA({
  reactStrictMode: true,
  images: {
    domains: ["localhost", "api.mydomain.me"],
  },

  async headers() {
    return [
      {
        // source: "/(.*)",
        source: "/",
        headers: securityHeaders,
      },
    ];
  },
});

and do let me know the improved version, but this works.