CODEWITHSUNDEEP
javascriptnext.jsprogressive-web-appsnext-pwa
CSS-Romeo
CSS-Romeo

Reputation: 362

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

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

enter image description here

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

Upvotes: 5

Views: 2874

Answers (2)

Tarun Majumder
Tarun Majumder

Reputation: 99

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

Upvotes: 0

juliomalves
juliomalves

Reputation: 50368

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"
});

Upvotes: 7

Related Questions