Error with npx @11ty/eleventy --serve

[francoscarpa]

Describe the bug My Eleventy project worked well. Recently, I decided to upload it to GitHub to enable Netlify’s continuous deployment and to let anyone study it. In that moment, I realized I had always forgotten to save the Eleventy package as a dependency inside the package.json file of the project. So, I ran npm install --save-dev @11ty/eleventy, and now the Eleventy package is shown as a dependency.

{
  ...
  "devDependencies": {
    "@11ty/eleventy": "^0.11.0",
    "@11ty/eleventy-navigation": "^0.1.5",
    "cssmin": "^0.4.3"
  },
  "dependencies": {
    "html-minifier": "^4.0.0"
  }
}

The problem is that now I get the following error when running the npx @11y/eleventy --serve command:

Unhandled rejection in promise ([object Promise]): (more in DEBUG output)
> self is not defined

`ReferenceError` was thrown:
   ReferenceError: self is not defined
      at Object.<anonymous> (/Users/francoscarpa/Desktop/francoscarpa.com/source/sw.js:4:1)
      at Module._compile (internal/modules/cjs/loader.js:956:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
      at Module.load (internal/modules/cjs/loader.js:812:32)
      at Function.Module._load (internal/modules/cjs/loader.js:724:14)
      at Module.require (internal/modules/cjs/loader.js:849:19)
      at require (internal/modules/cjs/helpers.js:74:18)
      at getDependenciesFor (/Users/francoscarpa/Desktop/francoscarpa.com/node_modules/@11ty/dependency-tree/main.js:21:5)
      at getCleanDependencyListFor (/Users/francoscarpa/Desktop/francoscarpa.com/node_modules/@11ty/dependency-tree/main.js:73:22)
      at /Users/francoscarpa/Desktop/francoscarpa.com/node_modules/@11ty/eleventy/src/EleventyWatchTargets.js:95:9

The self thing it’s speaking about is inside the file the manages the service worker of the website, sw.js:

const CACHE_NAME = "static60";
const STATIC_FILES = []; // Pages I want to cache

self.addEventListener("install", function (event) { // The "self" culprit
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      return cache.addAll(STATIC_FILES);
    })
  );
});

self.addEventListener("activate", function (event) { // The "self" culprit
  event.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(
        keyList.map(function (key) {
          if (key !== CACHE_NAME) {
            return caches.delete(key);
          }
        })
      );
    })
  );
});

self.addEventListener("fetch", function (event) { // The "self" culprit
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) return response;
      else {
        return fetch(event.request)
          .then(function (res) {
            return caches.open(CACHE_NAME).then(function (cache) {
              cache.put(event.request.url, res.clone());
              return res;
            });
          })
          .catch(function (err) {
            return caches.open(CACHE_NAME).then(function (cache) {
              return cache.match("/offline/");
            });
          });
      }
    })
  );
});

Note that this error is not shown when I run just npx @11ty/eleventy, without --serve.

Expected behavior I expect npx @11ty/eleventy --serve to work correctly as always, without this error.

Environment:

• OS: macOS Mojave 10.14.6 (18G2022)
• Eleventy version: 0.9.0

[binyamin]

@francoscarpa It's very difficult to debug without a sample repo we can play with. Can you upload or link to your repository, please?

[francoscarpa]

@francoscarpa It's very difficult to debug without a sample repo we can play with. Can you upload or link to your repository, please?

Sure, sorry: https://github.com/francoscarpa/francoscarpa.com.

[zachleat]

This is a duplicate of #1325. There is a workaround listed here: https://github.com/11ty/eleventy/issues/1325#issuecomment-691792459

Otherwise it’ll ship with 1.0