使用next-pwa编译Next.js应用程序时生成错误

Question

我一直试图运行一个本地Next.js (v12.2.2)项目，但由于某种原因，开发脚本没有正常工作。所有的依赖项都已经安装好了，但是我还是不能缩小脚本不能工作的原因。

运行脚本后，终端如下所示

​

​

错误-请检查您的GenerateSW插件配置: WebpackGenerateSW 'reactStrictMode‘属性不会出现在这里。你是说财产“排除”吗？

这是next.config.js文件

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

这是package.json文件

{
  "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"
  }
}

节点-版本: 16.17.0，npm-版本: 8.19.0

Answer 1

您对next-pwa插件的使用在5.6.0版时是不正确的。引入了一个改变插件签名的方法(参见next-pwa/releases/tag/5.6.0)。

从5.6.0版本开始。此插件函数签名已更改为遵循next.js推荐的模式。主要是从混合到pwa配置的其余部分中提取next.js配置。

在5.6.0版本中，根据文档，您的配置应该如下所示。

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