Next.js '在預渲染頁面“/”時發生錯誤：錯誤：縮小反應錯誤 #321；' 在生產構建期間

Question

我正在嘗試在 firebase 函數上運行 Next.js，並且之前已經成功部署過。 但是，在添加 webpack 插件 (svgr) 並進行進一步自定義后，我在構建時遇到了錯誤。 它是在 Next.js 自動優化頁面時成功編譯后發生的。

我的函數文件夾和我的 dev 文件夾的依賴項完全相同，除了函數文件夾有兩個附加項（用於 firebase）。

經過檢查，它似乎認為我有多個 React 實例。 在我的 /app 文件夾之外以開發模式運行應用程序工作正常，但是，在開發模式下在 /functions 文件夾之外運行應用程序仍然無法正常工作。

Error occurred prerendering page "/": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error occurred prerendering page "/404.html": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

下一個.config.js

module.exports = {
    distDir: "../functions/next",
    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });
        return config;
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        }
    },

};

app/package.json

  "dependencies": {
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "@svgr/webpack": "^4.3.3",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },

functions/package.json

  "engines": {
    "node": "8"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "@svgr/webpack": "^4.3.3"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },

Answer 1

讓我們保持 distDir 不變，說.next而不是../functions/.next 。 在某種程度上，您可以在使用cp .next ../functions/.next構建后立即復制構建工件。 您還需要改變dev值為true，當你調用next({ dev: true, ...otherOptions })或設置NODE_ENV=production運行firebase serve 。