[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

[grayaustinc]

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.

[sumitapporio]

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;