为什么我在next build
编译过程中遇到了Minified React错误#321?我是不是把useEffect()
搞砸了?
抛出的部分错误:
Automatically optimizing pages .(node:763) ExperimentalWarning: The fs.promises API is experimental
(node:762) ExperimentalWarning: The fs.promises API is experimental
(node:761) ExperimentalWarning: The fs.promises API is experimental
Automatically optimizing pages .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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:10945:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:10950:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:7133:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:1023:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:1026:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:1031:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:1031:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:1041:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/index.js:899:16)
Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
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.
Automatically optimizing pages ..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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:899:16)
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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:899:16)
Error occurred prerendering page "/XXX/XXX/syndic-copropriete". Read more: https://err.sh/next.js/prerender-error
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 "/XXX/XXX/aides-renovation-energetique". Read more: https://err.sh/next.js/prerender-error
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.
Automatically optimizing pages ..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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:899:16)
Error occurred prerendering page "/XXX". Read more: https://err.sh/next.js/prerender-error
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: 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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:899:16)
Error occurred prerendering page "/XXX/inscription". Read more: https://err.sh/next.js/prerender-error
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.
Automatically optimizing pages .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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:899:16)
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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/inscription.js:899:16)
Error occurred prerendering page "/XXX/inscription". Read more: https://err.sh/next.js/prerender-error
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: 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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20913:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20918:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:14649:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:899:16)
Error occurred prerendering page "/XXX/merci". Read more: https://err.sh/next.js/prerender-error
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 "/XXX/inscription". Read more: https://err.sh/next.js/prerender-error
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: 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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:6809:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:6814:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:4227:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:907:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:910:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:915:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:915:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:925:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:461:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/_error.js:783:16)
Error occurred prerendering page "/404". Read more: https://err.sh/next.js/prerender-error
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.
Automatically optimizing pages ..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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20913:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20918:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:14649:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:899:16)
Error occurred prerendering page "/XXX/merci". Read more: https://err.sh/next.js/prerender-error
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.
Automatically optimizing pages ...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.
at Z (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20913:404)
at module.exports.viRO.exports.useEffect (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:20918:356)
at App (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:14649:29)
at d (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1114:498)
at $a (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1117:16)
at a.b.render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:476)
at a.b.read (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1122:18)
at renderToString (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:1132:364)
at render (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:577:16)
at Object.renderPage (/XXX/XXX/XXX/XXX/.next/serverless/pages/[domainCode]/merci.js:899:16)
Error occurred prerendering page "/XXX/merci". Read more: https://err.sh/next.js/prerender-error
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.
> Build error occurred
Error: Export encountered errors
at _default (/usr/local/lib/node_modules/next/dist/export/index.js:19:1164)
at process._tickCallback (internal/process/next_tick.js:68:7)
Automatically optimizing pages .%
我尝试了:
在我的下一个Js应用程序上实现了gtag。
https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics
我精确的一些重要的这个例子告诉我们如何添加谷歌analytics
,而不是GTM
,这是两个非常不同的事情,但你只需要改变:
// pages/_document.tsx
import Document, { Head, Main, NextScript } from 'next/document';
import { Fragment } from 'react';
export default class MyDocument extends Document {
setGoogleTags() {
return {
__html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');
`
};
}
render() {
return (
<html>
<Head>
<Fragment>
<script dangerouslySetInnerHTML={this.setGoogleTags()} />
</Fragment>
</Head>
<body>
{/* <Fragment> */}
{/* <!-- Google Tag Manager (noscript) --> */}
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
></iframe>
</noscript>
<Main />
<NextScript />
</body>
</html>
);
}
}
我只是把一个东西从_app. js改为_app.tsx:
//_app.tsx
import Router from 'next/router';
import React, { useEffect, ReactElement } from 'react';
import { AppProps } from 'next/app';
import '../CSS/index.css';
import * as gtag from '../lib/gtag';
import '@brainhubeu/react-carousel/lib/style.css';
export default function App({ Component, pageProps }: AppProps): ReactElement {
useEffect(() => {
const handleRouteChange = (url: string) => {
gtag.pageview(url);
};
Router.events.on('routeChangeComplete', handleRouteChange);
return () => {
Router.events.off('routeChangeComplete', handleRouteChange);
};
}, []);
return <Component {...pageProps} />;
}
https://github.com/zeit/next.js/issues/160#issuecomment-634502987
4条答案
按热度按时间lc8prwob1#
这可能是因为你在页面上导入了两次React:
应该是
编辑
尝试从本地项目中删除
node_modules
和.next
文件夹,然后再次运行npm run build
。hyrbngr72#
当自动导入从错误的源导入钩子(例如
useState
)时,我遇到了这个问题。如果您正在执行:您应该执行以下操作:
jckbn6z73#
我认为有很多可能的原因会发生这种情况。我遇到这个问题是因为我用
--legacy-peer-deps
强制安装了一个包,因为它的peerDependencies卡在"react": 16.x
上。我不知道为什么这会破坏构建,但是删除了这个有问题的包(并用我自己的forked版本替换它,并增加了peerDependencies),一切都恢复了正常。
13z8s7eq4#
对我(和others)来说,这是一个织布机Chrome扩展导致的错误。