I have been trying to run a local Next.js (v 12.2.2) project but for some reason, the dev script is not working as it should. All the dependencies have been installed but still, I can't narrow down the reason why the script doesn't work.

The terminal looks like this after running the script

error - Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?

Here's the next.config.js file

const withPWA = require("next-pwa");

module.exports = withPWA({
    reactStrictMode: true,
    webpack5: true,
    webpack: (config) => {
        config.resolve.fallback = { fs: false };
        return config;
    },
    pwa: {
        dest: "public",
        register: true,
        disable: process.env.NODE_ENV === "development",
    },
    images: {
        domains: ["pbs.twimg", "img.icons8", "gateway.moralisipfs", "ipfs.moralis.io", "lh3.googleusercontent", "www.artnews"],
    },
    // for running with docker
    output: "standalone",
});

Here's the package.json file

{
  "name": "musixverse-client",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.6",
    "@heroicons/react": "^1.0.5",
    "@walletconnect/web3-provider": "^1.7.8",
    "@web3auth/web3auth": "^1.1.1",
    "axios": "^0.26.1",
    "country-state-city": "^3.0.1",
    "magic-sdk": "^8.0.1",
    "moralis": "^1.10.0",
    "next": "^12.2.2",
    "next-pwa": "^5.4.4",
    "next-sitemap": "^3.1.16",
    "next-themes": "^0.0.15",
    "persona": "^4.6.0",
    "react": "^17.0.2",
    "react-datepicker": "^4.8.0",
    "react-dom": "17.0.2",
    "react-image-crop": "^8.6.12",
    "react-moralis": "^1.4.0",
    "react-select": "^5.4.0",
    "styled-ponents": "^5.3.5",
    "web3": "^1.7.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.6.0",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  }
}

node-version: 16.17.0, npm-version: 8.19.0

I have been trying to run a local Next.js (v 12.2.2) project but for some reason, the dev script is not working as it should. All the dependencies have been installed but still, I can't narrow down the reason why the script doesn't work.

The terminal looks like this after running the script

error - Please check your GenerateSW plugin configuration: [WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?

Here's the next.config.js file

const withPWA = require("next-pwa");

module.exports = withPWA({
    reactStrictMode: true,
    webpack5: true,
    webpack: (config) => {
        config.resolve.fallback = { fs: false };
        return config;
    },
    pwa: {
        dest: "public",
        register: true,
        disable: process.env.NODE_ENV === "development",
    },
    images: {
        domains: ["pbs.twimg.", "img.icons8.", "gateway.moralisipfs.", "ipfs.moralis.io", "lh3.googleusercontent.", "www.artnews."],
    },
    // for running with docker
    output: "standalone",
});

Here's the package.json file

{
  "name": "musixverse-client",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.6",
    "@heroicons/react": "^1.0.5",
    "@walletconnect/web3-provider": "^1.7.8",
    "@web3auth/web3auth": "^1.1.1",
    "axios": "^0.26.1",
    "country-state-city": "^3.0.1",
    "magic-sdk": "^8.0.1",
    "moralis": "^1.10.0",
    "next": "^12.2.2",
    "next-pwa": "^5.4.4",
    "next-sitemap": "^3.1.16",
    "next-themes": "^0.0.15",
    "persona": "^4.6.0",
    "react": "^17.0.2",
    "react-datepicker": "^4.8.0",
    "react-dom": "17.0.2",
    "react-image-crop": "^8.6.12",
    "react-moralis": "^1.4.0",
    "react-select": "^5.4.0",
    "styled-ponents": "^5.3.5",
    "web3": "^1.7.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.6.0",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  }
}

node-version: 16.17.0, npm-version: 8.19.0

• javascript
• next.js
• progressive-web-apps
• next-pwa

Share Improve this question Follow edited Sep 6, 2022 at 21:00 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Sep 2, 2022 at 15:45 CSS-RomeoCSS-Romeo 36222 silver badges1212 bronze badges 3

• It says: "dude, reactStrictMode is not allowed here - read the dooooocs", do somthing, try to delete reactStrictMode – gapsf Commented Sep 2, 2022 at 18:08
• 1 @gapsf no luck buddy... It keeps throwing errors for all the consecutive properties defined in next.config.js. I read the docs exhaustively but got nothing from it, that's why I asked the question : ) – CSS-Romeo Commented Sep 3, 2022 at 7:40
• nextjs/docs/api-reference/next.config.js/introduction check syntax – gapsf Commented Sep 3, 2022 at 7:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Your usage of the next-pwa plugin is incorrect as of version 5.6.0. A breaking change was introduced that changed the plugin signature (see next-pwa/releases/tag/5.6.0).

Start from version 5.6.0. This plugin function signature has been changed to follow the remended pattern from next.js. Mainly extracting pwa config from mixing into rest of the next.js config.

From version 5.6.0, according to the documentation, your config should look like the following.

// `next-pwa` config should be passed here
const withPWA = require("next-pwa")({
    dest: "public",
    register: true,
    disable: process.env.NODE_ENV === "development",
});

// Use `withPWA` and pass general Next.js config
module.exports = withPWA({    
    reactStrictMode: true,
    webpack5: true,
    webpack: (config) => {
        config.resolve.fallback = { fs: false };
        return config;
    },
    images: {
        domains: ["pbs.twimg.", "img.icons8.", "gateway.moralisipfs.", "ipfs.moralis.io", "lh3.googleusercontent.", "www.artnews."]
    },
    output: "standalone"
});

I have the above configuration but getting the below error:

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://mydomain.or/_next/static/TtNoj27ce4xV1zZzFfm_C/_buildManifest.js","status":404}]