Build error when compiling Next.js app using next-pwa

Question

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.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"],
    },
    // 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-components": "^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

It says: "dude, reactStrictMode is not allowed here - read the dooooocs", do somthing, try to delete reactStrictMode — gapsf, Sep 02 '22 at 18:08
@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, Sep 03 '22 at 07:40
https://nextjs.org/docs/api-reference/next.config.js/introduction check syntax — gapsf, Sep 03 '22 at 07:45

juliomalves · Accepted Answer · 2022-09-05T21:32:38.583

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 recommended 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.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"]
    },
    output: "standalone"
});

score 0 · Answer 2 · answered Jul 05 '23 at 18:33

0

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}]

answered Jul 05 '23 at 18:33

Tarun Majumder

59
7

Here's a [link](https://github.com/shadowwalker/next-pwa/issues/288) to a similar issue faced by someone raised on github. Try excluding buildManifest.js in next.config – CSS-Romeo Jul 09 '23 at 18:33

Build error when compiling Next.js app using next-pwa

2 Answers2

Linked