[英]Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production build
I am trying to run Next.js on firebase functions, and have successfully deployed before.我正在尝试在 firebase 函数上运行 Next.js,并且之前已经成功部署过。 However, after adding a webpack plugin (svgr) and making further customisations I am running into an error whilst building.但是,在添加 webpack 插件 (svgr) 并进行进一步自定义后,我在构建时遇到了错误。 It is occurring after a successful compile when Next.js is automatically optimizing pages.它是在 Next.js 自动优化页面时成功编译后发生的。
The dependencies for both my functions folder and my dev folder are the exact same, except the functions folder has two extras (for firebase).我的函数文件夹和我的 dev 文件夹的依赖项完全相同,除了函数文件夹有两个附加项(用于 firebase)。
Upon inspection, it seems to think I have multiple React instances.经过检查,它似乎认为我有多个 React 实例。 Running the app in dev mode out of my /app folder works fine, however, running the app out of the /functions folder in dev mode still does not work.在我的 /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下一个.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"
},
Let's leave distDir as is, say to .next
instead of ../functions/.next
.让我们保持 distDir 不变,说.next
而不是../functions/.next
。 In a way, You can copy build artifact right after the build using cp .next ../functions/.next
.在某种程度上,您可以在使用cp .next ../functions/.next
构建后立即复制构建工件。 You also need to change dev
value to true when you call next({ dev: true, ...otherOptions })
or set NODE_ENV=production
to run firebase serve
.您还需要改变dev
值为true,当你调用next({ dev: true, ...otherOptions })
或设置NODE_ENV=production
运行firebase serve
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.