Why I got Minified React Error #321 during the next build compilation? Did I mess up with useEffect() ?
Part of the error throwed :
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 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: Error: Minified React error #321; visit 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 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 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: Error: Minified React error #321; visit 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: Error: Minified React error #321; visit 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 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: Error: Minified React error #321; visit for the full message or use the non-minified dev environment for full errors and additional helpful warnings. Error: Minified React error #321; visit 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: Error: Minified React error #321; visit 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 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 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: Error: Minified React error #321; visit for the full message or use the non-minified dev environment for full errors and additional helpful warnings. Error: Minified React error #321; visit 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: Error: Minified React error #321; visit 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: Error: Minified React error #321; visit for the full message or use the non-minified dev environment for full errors and additional helpful warnings. Error: Minified React error #321; visit 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: Error: Minified React error #321; visit 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 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: Error: Minified React error #321; visit 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 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: Error: Minified React error #321; visit 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 .% What I tried:
Implemented the gtag on my next Js app. I followed the Zeit example from
I precise something important this example show us how to add google analytics and not GTM that's two very differentes thing, but you just need to change:
// 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= '(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="" height="0" width="0" style={{ display: 'none', visibility: 'hidden' }} ></iframe> </noscript> <Main /> <NextScript /> </body> </html> ); } } I've just changed one thing is _app.js to _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} />; } 3 Answers
It might because you are importing React twice on the page:
import { useEffect } from 'react'; import Router from 'next/router'; import React, { ReactElement } from 'react'; should just be:
import React, { useEffect, ReactElement } from 'react'; import Router from 'next/router'; Edit
Try to delete your node_modules and .next folder from your local project and then run your npm run build again. That seemed to solve it for me.
I faced this when an auto import imported hook eg useState from the wrong source. If you are doing:
import { useState } from 'react/cjs/react.production.min'; You should be doing:
import React, { useState} from 'react'; I think there's a lot of possible reasons why this could happen. I ran into this problem because I pushed through a package installation with --legacy-peer-deps, since its peerDependencies were stuck on "react": 16.x.
I'm not sure why this would break the build exactly, but removing the offending package (and replacing it with my own forked version with the peerDependencies bumped up) got everything working again.
