Next.js '在预渲染页面“/”时发生错误：错误：Minified React 错误 #321;'在生产构建期间答案

【问题标题】：Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production buildNext.js '在预渲染页面“/”时发生错误：错误：Minified React 错误 #321;'在生产构建期间
【发布时间】：2020-03-27 16:55:02
【问题描述】：

我正在尝试在 firebase 函数上运行 Next.js，并且之前已经成功部署过。但是，在添加 webpack 插件 (svgr) 并进行进一步自定义后，我在构建时遇到了错误。当 Next.js 自动优化页面时，它会在编译成功后发生。

我的functions文件夹和我的dev文件夹的依赖关系是完全相同的，除了functions文件夹有两个额外的（用于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.

next.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"
  },

【问题讨论】：

删除依赖项中的^ 似乎是合理的，以确保它不会随着下一个版本更新或不同步。

标签： javascript reactjs next.js

【解决方案1】：

让 distDir 保持原样，告诉.next 而不是../functions/.next。在某种程度上，您可以使用cp .next ../functions/.next 在构建之后立即复制构建工件。您还需要在调用next({ dev: true, ...otherOptions }) 或设置NODE_ENV=production 以运行firebase serve 时将dev 的值更改为true。

【讨论】：