在生产构建期间，Next.js出现了'Error occurred prerendering page "/": Error: Minified React error #321;'错误。

Question

我正在尝试在Firebase函数上运行Next.js，并且之前已成功部署。但是，在添加webpack插件（svgr）并进行进一步自定义后，构建时出现错误。这个错误发生在成功编译后，当Next.js自动优化页面时。

我的函数文件夹和开发文件夹的依赖项完全相同，除了函数文件夹有两个额外的依赖项（为Firebase而添加的）。

经过检查，它似乎认为我有多个React实例。在我的/app文件夹中以开发模式运行应用程序可以正常工作，但是在/functions文件夹中以开发模式运行应用程序仍然无法正常工作。

在预渲染页面“/”时发生错误：错误：缩小版React错误＃321；访问https://reactjs.org/docs/error-decoder.html?invariant=321获取完整信息或使用非缩小版dev环境以获取完整错误和其他有用的警告。

在预渲染页面“/404.html”时发生错误：错误：缩小版React错误＃321；访问https://reactjs.org/docs/error-decoder.html?invariant=321获取完整信息或使用非缩小版dev环境以获取完整错误和其他有用的警告。

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

- Recon

---

似乎删除依赖中的 ^ 是合理的，以确保在下一次构建时它不会被更新或者失去同步。 - Evgeny Timoshenko

Answer 1

让我们将distDir保持不变，改为使用.next而不是../functions/.next。这样，您可以在构建后立即复制构建工件，使用cp .next ../functions/.next。当您调用next({ dev: true, ...otherOptions })时，还需要将dev值更改为true，或者设置NODE_ENV=production来运行firebase serve。

- Gian Febrian