[WebpackGenerateSW] '' property is not expected to be here. Did you mean property ''?

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information



const { i18n } = require("./next-i18next.config");
const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");
module.exports = withPWA({
    trailingSlash: true,
    images: {
        domains: ['127.0.0.1'],
    },
    typescript: {
        ignoreBuildErrors: true,
    },
    pwa: {
        disable: process.env.NODE_ENV !== "production",
        dest: "public",
        runtimeCaching,
        fallbacks: {
            image: '/assets/images/banner/banner-1.jpg'
        }
    },
    i18n,
});

my packge json:

{
  "name": "nabrikafront",
  "version": "1.0.4",
  "private": true,
  "scripts": {
    "clean": "rimraf \"{.next,dist,build,out,node_modules}\"",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "info": "next info",
    "pm2": "pm2 start pm2.json",
    "analyze": "cross-env ANALYZE=true next build"
  },
  "dependencies": {
    "@fontsource/open-sans": "^4.4.5",
    "@fontsource/satisfy": "^4.4.5",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@headlessui/react": "^1.2.0",
    "@next/bundle-analyzer": "^12.1.6",
    "@reach/portal": "^0.15.0",
    "@tailwindcss/forms": "^0.3.3",
    "axios": "^0.21.1",
    "body-scroll-lock": "^3.1.5",
    "classnames": "^2.3.1",
    "cross-env": "^7.0.3",
    "deep-rename-keys": "^0.2.1",
    "firebase": "^8.8.0",
    "framer-motion": "^4.1.17",
    "js-cookie": "^2.2.1",
    "localforage": "^1.9.0",
    "lodash": "^4.17.21",
    "next": "12.0.7",
    "next-i18next": "^8.5.0",
    "next-pwa": "^5.2.21",
    "next-seo": "5.4.0",
    "overlayscrollbars": "^1.13.1",
    "overlayscrollbars-react": "^0.2.2",
    "rc-drawer": "^4.3.1",
    "rc-tree-select": "^5.4.0",
    "react": "17.0.2",
    "react-content-loader": "^6.0.3",
    "react-cool-inview": "^2.0.8",
    "react-countdown": "^2.3.2",
    "react-device-detect": "^1.17.0",
    "react-dom": "17.0.2",
    "react-dropdown-tree-select": "^2.7.1",
    "react-dropdown-tree-select-rtl": "^0.0.4-semantic-release",
    "react-hook-form": "^7.8.8",
    "react-icons": "^4.2.0",
    "react-input-range": "^1.3.0",
    "react-intersection-observer": "^9.0.0",
    "react-masonry-css": "^1.0.16",
    "react-multi-carousel": "^2.6.5",
    "react-query": "^3.17.1",
    "react-rating-stars-component": "^2.2.0",
    "react-scroll": "^1.8.2",
    "react-slick": "^0.28.1",
    "react-sticky-box": "^0.9.3",
    "react-tabs": "^3.2.2",
    "react-toastify": "8",
    "react-use": "^17.2.4",
    "react-wheel-of-prizes": "^1.0.9",
    "swiper": "^6.7.0"
  },
  "devDependencies": {
    "@types/body-scroll-lock": "^2.6.1",
    "@types/js-cookie": "^2.2.6",
    "@types/lodash": "^4.14.170",
    "@types/node": "^16.7.2",
    "@types/overlayscrollbars": "^1.12.0",
    "@types/react": "18.0.1",
    "@types/react-scroll": "^1.8.2",
    "@types/react-tabs": "^2.3.2",
    "autoprefixer": "^10.2.6",
    "mapir-react-component": "^1.8.1",
    "postcss": "^8.3.5",
    "rimraf": "^3.0.2",
    "tailwindcss": "^2.2.4",
    "tailwindcss-rtl": "^0.7.3",
    "typescript": "^4.4.2"
  }
}

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

Describe the Bug

after this issue : ref after upgrade @types/react to “18.0.1” this error shows to me

[WebpackGenerateSW] 'trailingSlash' property is not expected to be here. Did you mean property 'include'?

i also remove trailingSlash but after that error comes up: [WebpackGenerateSW] 'images' property is not expected to be here. Did you mean property 'include'?

Expected Behavior

These settings work well on one of my computers, which I already had the packages from several months ago, and exactly with the same version of the packages, but when I try to run it on another system with the yarn install && yarn dev command, an error occurs. I feel that this problem is due to the new version of typescript, but I have no idea about it

Link to reproduction

https://gitlab.com/sadrakeshtar/nabrika-front

To Reproduce

Issue Analytics

State:
Created a year ago
Comments:10 (2 by maintainers)

Top GitHub Comments

22reactions

grayaustinccommented, Sep 2, 2022

Haven’t look into this but it may be an issue with how you are using next-pwa. Current next-pwa documentation shows that it should be initialized like so

const withPWA = require('next-pwa')({
  dest: 'public'
  // disable: process.env.NODE_ENV === 'development',
  // register: true,
  // scope: '/app',
  // sw: 'service-worker.js',
  //...
})

module.exports = withPWA({
  // next.js config
})

With the import being a function that includes next-pwa options. I have not tested any of this so this is 100% an assumption on my part, based on a quick glance at what has been provided.

5reactions

sumitapporiocommented, Sep 5, 2022

this worked for me

const runtimeCaching = require("next-pwa/cache");
const withPWA = require("next-pwa")({
    dest: "public",
    register: true,
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [/middleware-manifest.json$/],
});

const nextConfig = withPWA({
    // next config
});
module.exports = nextConfig;

Top Results From Across the Web

Failed to compile error during creating PWA with next.js

Failed to compile. Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'reactStrictMode' property is not expected to be here.

How to use the workbox-webpack-plugin.GenerateSW ... - Snyk

To help you get started, we've selected a few workbox-webpack-plugin.GenerateSW examples, based on popular ways it is used in public projects.

next-pwa - npm

NOTE 2 - If you encounter error TypeError: Cannot read property ... to do with next-pwa plugin, and you probably have already set...

API Reference - Chrome Developers

Content available under the CC-BY-SA-4.0 license. We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.

How to Generate Service Workers Automatically

However, this is not the first Service Worker generation tool that was created. There were tools such as sw-precache for similar purposes. But ......