[Bug]: Self is not defined

[Zlkva]

Provide environment information

{
  "name": "roost",
  "version": "0.2.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@serwist/next": "^8.4.1",
    "@serwist/precaching": "^8.4.1",
    "@serwist/sw": "^8.4.1",
    "isomorphic-unfetch": "^3.1.0",
    "js-cookie": "^3.0.1",
    "luxon": "^3.3.0",
    "moment": "^2.29.4",
    "next": "^14.0.4",
    "next-cookies": "^2.0.3",
    "normalize.css": "^8.0.1",
    "npm": "^10.2.5",
    "octokit": "^3.1.2",
    "prisma": "^5.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.4.0",
    "react-image-gallery": "^1.2.11",
    "react-modal": "^3.16.1",
    "react-tabs": "^5.1.0",
    "react-twemoji": "^0.5.0",
    "rss-parser": "^3.13.0",
    "snoowrap": "^1.23.0"
  },
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.0.4",
    "sass": "^1.49.10"
  }
}

Which project is this issue for?

@serwist/sw

Link to reproduction - Issues with a link to complete (but minimal) reproduction code help us address them faster

https://projectisprivate-cantreplicate.com

To reproduce

Attempt to build Next.js with Serwist installed and configured to match the spec provided here;
https://serwist.pages.dev/docs/next/getting-started

On build (local and on netlify) the build fails stating that "self is not defined" and references sw.js

I am using the javascript implementation, not typescript.

sw.js

import { defaultCache } from "@serwist/next/browser";
import { installSerwist } from "@serwist/sw";

installSerwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
});

Describe the bug

✓ Linting and checking validity of types
▲ Next.js 14.0.4

• Environments: .env.local

✓ (serwist) Compiling for server...
✓ (serwist) Compiling for server...
✓ (serwist) Compiling for client (static)...
○ (serwist) Service worker: D:\code\roost\public\sw.js
○ (serwist) URL: /sw.js
○ (serwist) Scope: /
✓ Creating an optimized production build
✓ Compiled successfully
Collecting page data ...ReferenceError: self is not defined
at D:\code\roost.next\server\pages\sw.js:1:2979

Build error occurred
Error: Failed to collect page data for /sw
at D:\code\roost\node_modules\next\dist\build\utils.js:1220:15 {
type: 'Error'
}

Expected behavior

The project builds.

Screenshots (if relevant)

No response

Additional information (if relevant)

No response

[Zlkva]

if you need my code, I can provide that. I am just following the prompts on https://serwist.pages.dev/docs/next/getting-started and am using the JS entries, not TS as I am building in JS.

[DuCanhGH]

The error clearly indicates that Next.js is trying to build your file as a page, which it is not. Move it from pages/sw.js to something like sw/index.js. Unlike in App Router, you can't co-locate the service worker the way the docs suggests with your routes in Pages Router, for it will, too, be recognized as a route.

[Zlkva]

That was exactly the issue. Thank you.