Fetch event handlers must be added during the worker script’s initial evaluation

[mastepanoski]

I've added next-pwa, configured next.config.js:

  if (process.env.NODE_ENV === 'development') {
   plugins = withPlugins([
     withCss,
     [withFonts, { enableSvg: true }],
     [optimizedImages, optimizedImagesConfig]
   ], opts)
 } else {
   plugins = withPlugins([
     withPWA,
     withCss,
     [withFonts, { enableSvg: true }],
     [optimizedImages, optimizedImagesConfig]
   ], opts)
 }

And Firefox triggered on the console:

Fetch event handlers must be added during the worker script’s initial evaluation. ./workbox-eb42688b.js:1:13052
Fetch event handlers must be added during the worker script’s initial evaluation. ./workbox-eb42688b.js:1:796

I've configured my next project with express, and these are the lines I added to find sw.js:

    if (process.env.NODE_ENV !== 'development') {
      server.get(['/sw.js', '/workbox-*', '/service-worker.js'], (req, res) => {
        const {
          path: pathname
        } = req
        const filePath = path.join(__dirname, '.next', pathname)
        app.serveStatic(req, res, filePath)
      })
    }

I've configured CSP:

      csp = `default-src 'self'; script-src 'self' '${cspHashOf(
        NextScript.getInlineScriptSource(this.props)
      )}'`
      csp += ' \'unsafe-eval\' https://www.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com'
      csp += ' https://recaptcha.net https://maps.googleapis.com https://maps.gstatic.com'
      csp += ' https://www.google-analytics.com https://ajax.googleapis.com https://www.google.com'
      csp += ' https://google.com https://gstatic.com https://ssl.google-analytics.com'
      csp += ' https://www.youtube.com https://s.ytimg.com https://connect.facebook.net;'
      csp += ' img-src * data: \'unsafe-inline\';'
      csp += ' style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com https://fonts.gstatic.com;'
      csp += ' font-src \'self\' https://fonts.gstatic.com data:;'
      csp += ' frame-src https://www.google.com https://www.youtube.com https://www.facebook.com'
      csp += ' https://s-static.ak.facebook.com; object-src \'self\'; connect-src *'

These are my dependencies:

  "dependencies": {
    "@babel/core": "7.8.7",
    "@babel/runtime": "7.8.7",
    "@fortawesome/fontawesome-svg-core": "1.2.27",
    "@fortawesome/free-brands-svg-icons": "5.12.1",
    "@fortawesome/free-regular-svg-icons": "5.12.1",
    "@fortawesome/free-solid-svg-icons": "5.12.1",
    "@fortawesome/react-fontawesome": "0.1.9",
    "@zeit/next-css": "^1.0.2-canary.0",
    "axios": "0.19.2",
    "body-parser": "1.19.0",
    "boom": "7.3.0",
    "compression": "1.7.4",
    "connect-session-sequelize": "6.1.1",
    "cookie-parser": "1.4.4",
    "d3-format": "1.4.3",
    "dotenv": "8.2.0",
    "enquire-js": "^0.2.1",
    "express": "4.17.1",
    "express-robots-txt": "0.4.1",
    "express-session": "1.17.0",
    "file-loader": "5.1.0",
    "formik": "2.1.4",
    "get-video-id": "3.1.4",
    "google-map-react": "^1.1.6",
    "helmet": "3.21.3",
    "html-to-react": "1.4.2",
    "http-proxy-middleware": "1.0.1",
    "imagemin-gifsicle": "7.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "7.1.0",
    "imagemin-svgo": "7.1.0",
    "isomorphic-unfetch": "^3.0.0",
    "lodash.shuffle": "^4.2.0",
    "lqip-loader": "^2.2.0",
    "lusca": "^1.6.1",
    "mobile-detect": "1.4.4",
    "morgan": "^1.9.1",
    "next": "9.2.2",
    "next-compose-plugins": "2.2.0",
    "next-fonts": "^1.0.3",
    "next-optimized-images": "2.5.5",
    "next-pwa": "^2.2.0",
    "nookies": "^2.0.8",
    "prop-types": "15.7.2",
    "pure-react-carousel": "1.25.2",
    "rc-drawer": "3.1.3",
    "rc-slider": "9.2.2",
    "rc-switch": "^1.9.0",
    "react": "16.13.0",
    "react-animated-css": "1.2.1",
    "react-autosuggest": "^9.4.3",
    "react-countup": "4.3.3",
    "react-detect-offline": "2.4.0",
    "react-dom": "16.13.0",
    "react-ga": "2.7.0",
    "react-iframe": "1.8.0",
    "react-js-pagination": "3.0.3",
    "react-loader-spinner": "3.1.5",
    "react-loading": "^2.0.3",
    "react-masonry-css": "1.0.14",
    "react-modal": "3.11.2",
    "react-modal-video": "1.2.3",
    "react-no-ssr": "^1.1.0",
    "react-parallax": "3.0.3",
    "react-scroll": "1.7.16",
    "react-share": "4.0.1",
    "react-slick": "0.25.2",
    "react-sticky-el": "1.1.0",
    "react-text-truncate": "0.16.0",
    "react-toastify": "5.5.0",
    "react-youtube": "7.9.0",
    "reaptcha": "1.7.2",
    "rotating-file-stream": "2.0.2",
    "sequelize": "5.21.5",
    "slugify": "1.4.0",
    "sqlite3": "4.1.1",
    "universal-cookie": "4.0.3",
    "url-parser": "^0.0.1",
    "yup": "0.28.2"
  },
  "optionalDependencies": {
    "fsevents": "*"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.8.3",
    "@babel/plugin-proposal-decorators": "7.8.3",
    "@babel/plugin-proposal-object-rest-spread": "7.8.3",
    "@babel/plugin-transform-react-jsx-source": "7.8.3",
    "@babel/plugin-transform-runtime": "7.8.3",
    "@babel/preset-env": "7.8.7",
    "@babel/preset-react": "7.8.3",
    "@storybook/addon-actions": "5.3.14",
    "@storybook/addon-links": "5.3.14",
    "@storybook/addons": "5.3.14",
    "@storybook/react": "5.3.14",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "25.1.0",
    "babel-loader": "8.0.6",
    "eslint": "6.8.0",
    "faker": "^4.1.0",
    "husky": "4.2.3",
    "jest": "25.1.0",
    "snazzy": "^8.0.0",
    "standard": "14.3.1"
  }

The Node version: 12.16.1 The Next version: 9.2.2

[shadowwalker]

I could not reproduce the error, need more information. But this error usually happens if self.addListener is executed in a nested block

[mastepanoski]

It's weird, It only appears the first loading, if you press Ctrl F5 the error leaves. I close the browser, re-enter and do the same. I am going to check if there is a nested listener.

[mastepanoski]

There is no nested listener. I used the service worker generated by PWA "as is". If I remove next-pwa everything works as I expected. It is a issue related with the runtimeCaching, because it is not refreshing some contents until I press Ctrl F5, then the contents refresh and the errors related to the handlers disappear from the console. I am going to do a deeper research in this regard.