使用next-pwa编译Next.js应用程序时出现构建错误

Question

我一直在尝试运行一个本地的 Next.js 项目（版本为12.2.2），但出于某些原因，dev 脚本没有按照预期工作。所有依赖项都已安装，但我仍然无法缩小脚本不起作用的原因。

运行脚本后，终端看起来像这样：

错误 - 请检查您的GenerateSW插件配置： [WebpackGenerateSW] 'reactStrictMode'属性不应该在这里出现。您是想使用'exclude'属性吗？

这是`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"
  }
}

Node 版本：16.17.0， NPM 版本：8.19.0

- CSS-Romeo

---

它说：“哥们，这里不允许使用 reactStrictMode - 去看看文档吧”，试试删除 reactStrictMode，看看能不能解决问题。 - gapsf

@gapsf，没什么好运的伙计... 它对于在next.config.js中定义的所有连续属性都会抛出错误。我详尽地阅读了文档，但没有从中得到任何东西，这就是为什么我问这个问题的原因：） - CSS-Romeo

请检查语法：https://nextjs.org/docs/api-reference/next.config.js/introduction - gapsf

Answer 1

从版本5.6.0开始，next-pwa 插件的使用方法已经不正确。引入了一个重大变化，改变了插件签名（请参见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"
});

- juliomalves

Answer 2

我有上述配置，但是遇到了以下错误：

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

- Tarun Majumder

---

这是一个类似问题的链接，由某人在GitHub上提出。尝试在next.config中排除buildManifest.js文件。 - CSS-Romeo