vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.26k stars 26.89k forks source link

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

Closed sbh96 closed 2 years ago

sbh96 commented 2 years ago

Verify 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

balazsorban44 commented 2 years ago

It looks like the reproduction repo is private, I get 404. Could you make it public so I can have a look? :pray:

I don't think @types/react should affect webpack though. :thinking:

sbh96 commented 2 years ago

It looks like the reproduction repo is private, I get 404. Could you make it public so I can have a look? 🙏

I don't think @types/react should affect webpack though. 🤔

Yes thats right i fix it with this Ref

grayaustinc commented 2 years ago

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.

yair-rodriguez commented 2 years ago

I was having a similar error. Captura de pantalla 2022-09-02 132116

I solved by updating next-pwa dependency to its latest version (from ^5.3.1 to ^5.6.0) and, as @grayaustinc suggested, modified next.config.js in order to initialize next-pwa as documentation shows.

TBytes404 commented 2 years ago

this worked for me

https://github.com/shadowwalker/next-pwa/issues/398#issuecomment-1236069816

sumitsk2 commented 2 years ago

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;
koalafr commented 2 years ago

It seems the readme has been updated on npm

with suggestions from other comments, I got this to throw no errors:

/** @type {import('next').NextConfig} */
const runtimeCaching = require("next-pwa/cache");
const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
  runtimeCaching,
  buildExcludes: [/middleware-manifest.json$/],
  disable: process.env.NODE_ENV === "development",
});

const nextConfig = withPWA({
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ["fr"],
    defaultLocale: "fr",
  },
});
module.exports = nextConfig;
balazsorban44 commented 2 years ago

This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

ExoticCoder16 commented 2 years ago

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.

It worked for me ! Thank you so much ! a BIG HELP !

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.