Skip to content
Fix Code Error

useEffect Error: Minified React error #321 (GTM implementation instead of google analitycs)

April 12, 2021 by Code Error
Posted By: Anonymous

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 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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:10945:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:10950:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:7133:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:1023:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:1026:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:1031:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:1031:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:1041:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/index.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:899:16)

Error occurred prerendering page "/✘✘✘/✘✘✘/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 "/✘✘✘/✘✘✘/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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21744:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:21749:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:14938:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/[formationUrl]/[courseCode].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.
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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:899:16)

Error occurred prerendering page "/✘✘✘/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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21165:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:21170:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:14443:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/inscription.js:899:16)

Error occurred prerendering page "/✘✘✘/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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20913:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20918:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:14649:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:899:16)

Error occurred prerendering page "/✘✘✘/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 "/✘✘✘/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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:6809:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:6814:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:4227:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:907:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:910:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:915:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:915:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:925:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/_error.js:461:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20913:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20918:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:14649:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:899:16)

Error occurred prerendering page "/✘✘✘/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 (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20913:404)
    at module.exports.viRO.exports.useEffect (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:20918:356)
    at App (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:14649:29)
    at d (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1114:498)
    at $a (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1117:16)
    at a.b.render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:476)
    at a.b.read (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1122:18)
    at renderToString (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:1132:364)
    at render (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:577:16)
    at Object.renderPage (/✘✘✘/✘✘✘/✘✘✘/✘✘✘/.next/serverless/pages/[domainCode]/merci.js:899:16)

Error occurred prerendering page "/✘✘✘/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 .%                                                                                                       

What I tried:

Implemented the gtag on my next Js app. I followed the Zeit example from

https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-✘✘✘XX');
          `
        };
    }

    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-✘✘✘✘✘✘"
                                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} />;
}

https://github.com/zeit/next.js/issues/160#issuecomment-634502987

Solution

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.

Answered By: Anonymous

Related Articles

  • Ubuntu apt-get unable to fetch packages
  • Examples of GoF Design Patterns in Java's core libraries
  • Conditional module loading in Nuxt.js
  • Eclipse will not start and I haven't changed anything
  • What are the new features in C++17?
  • webpack-dev-server npm run dev throwing TypeError:…
  • Jetpack Compose and Hilt Conflict
  • TypeError: Cannot read property 'webpackJsonp' of undefined
  • How can I access the Google Analytics dataLayer…
  • Worker Script Failing to Load for Vue Webpack Built App
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • Google analytics (via tag manager) loses track of…
  • Google Tag Manager breaks Next.js Link
  • TypeError: Cannot convert a symbolic Keras…
  • Adobe XD to responsive html
  • Using computed in Vue.js and when mounted is called…
  • What is the list of valid @SuppressWarnings warning…
  • Heroku deploy fails with react and next js
  • Ember test fail with `testem.js not loaded?`
  • render function or template not defined in…
  • Can't install via pip because of egg_info error
  • Longest sequence that holds a property in Dafny
  • Error using core-scaffold from polymer JS in the…
  • org.gradle.api.tasks.TaskExecutionException:…
  • Aurelia binding an object in a custom element
  • General problems with Google Optimize in React / Next.js
  • react-table has a issue with rendering in next.js
  • Flutter localization in `Drawer` leads to `Null…
  • R - Apply function to list of lm summaries
  • getting text input from a form in react.js using Refs
  • The 'compilation' argument must be an instance of…
  • Correctly configure webpack-dev-middleware with…
  • Getting a "TypeError" when trying to validate a form
  • The difference between creating an instance of a…
  • Google Tag Manager, requirejs and the Aurelia CLI
  • How to add Typescript to a Nativescript-Vue project?
  • How do I fix deployment error…
  • When I'm testing a web app by JUnit and Mockito I…
  • Webpack dev server for vue-cli: Error spawn EACCES
  • Issue in loading ember app as child application in…
  • How to set up Google Analytics through Google Tag…
  • Vercel Next.js build error while prerendering pages
  • Execution failed for task…
  • Fastest way to determine if an integer's square root…
  • next/node app deployment errors with heroku
  • Unable to run Robolectric and Espresso with a…
  • Runing vue/cli app under docker simple index.html is opened
  • Integrate ZXing in Android Studio
  • Cannot compile Next.js project with hooks
  • UnsatisfiedDependencyException: Error creating bean…
  • Android- Error:Execution failed for task…
  • Why am I getting a "401 Unauthorized" error in Maven?
  • How to build an android library with Android Studio…
  • ./components/Avatar.tsx Error: Cannot find module…
  • How do I catch a numpy warning like it's an…
  • How to change the color of vaadin-select-text-field…
  • How are Ember's Promises related to Promises in…
  • DeprecationWarning: Tapable.plugin is deprecated.…
  • Next.js - How to make sure is set by the time the…
  • How to render web component in Polymer
  • Spring Boot - Cannot determine embedded database…
  • How to store custom objects in NSUserDefaults
  • How to create a pandas colum with dictionary count…
  • Show scroll update when scrolling down page
  • Why is my Shopify App built with Next.js (React) so…
  • How to use module.exports in Next.js
  • React 16.14.0: Error was not caught ReferenceError:…
  • Difference between "module.exports" and "exports" in…
  • Launching Spring application Address already in use
  • Pass props in Link react-router
  • Gradle error: Execution failed for task…
  • How to create and publish a Vuejs component on NPM
  • Google Forms file upload complete example
  • ExpressJS How to structure an application?
  • Cheapest way to deploy a React app using NextJS SSR on AWS?
  • How to solve Internal Server Error in Next.Js?
  • Should I check in folder "node_modules" to Git when…
  • C++ OpenGL stb_image.h errors
  • Rails wrong number of arguments error when…
  • Vue js how to use route from index.html to docs folder
  • CSS animation as a Google Map Marker (Polymer 1.0)?
  • Rewrite URL after redirecting 404 error htaccess
  • Angular 2 router no base href set
  • Plugin…
  • Clearing a polyline on a Polymer Google Map
  • laravel vuejs/axios put request Formdata is empty
  • Passport.js in Next.js app not saving user across…
  • Unable to get Notification pop-up
  • Getting Dropwizard Client And Jersey/HTTP I/O Error…
  • coercing to Unicode: need string or buffer, NoneType…
  • how to include google-map in polymer#^2.0 as it was…
  • NodeJS - Error installing with NPM
  • header('HTTP/1.0 404 Not Found'); not doing anything
  • yeoman generator-ember doesn't show anything in browser
  • Relative imports for the billionth time
  • Filter a dataframe meeting some criteria
  • Build error occurred ReferenceError: describe is not…
  • Polymer routing: inner routes not reflecting
  • How do I return the response from an asynchronous call?
  • Why does C++ code for testing the Collatz conjecture…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to register a component locally?

Next Post:

How do i trigger v-on:click from jquery trigger?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error