title: useEffect Error: Minified React error #321 (GTM implementation instead of google analitycs)
body: <p>Why I got Minified React Error #321 during the <code>next build</code> compilation? Did I mess up with <code>useEffect()</code> ?</p>
  
  <p>Part of the error throwed :</p>
  
  <pre><code>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.
  
  &gt; 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 .%                                                                                                       
  </code></pre>
  
  <p>What I tried:</p>
  
  <p>Implemented the gtag on my next Js app. I followed the Zeit example from </p>
  
  <blockquote>
    <p><a href="https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics" rel="noreferrer">https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics</a></p>
  </blockquote>
  
  <p>I precise something important this example show us how to add google <code>analytics</code> and not <code>GTM</code> that's two very differentes thing, but you just need to change:</p>
  
  <pre><code>// 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'?'&amp;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 (
              &lt;html&gt;
                  &lt;Head&gt;
                      &lt;Fragment&gt;
                          &lt;script dangerouslySetInnerHTML={this.setGoogleTags()} /&gt;
                      &lt;/Fragment&gt;
                  &lt;/Head&gt;
                  &lt;body&gt;
                      {/* &lt;Fragment&gt; */}
                          {/* &lt;!-- Google Tag Manager (noscript) --&gt; */}
                          &lt;noscript&gt;
                              &lt;iframe
                                  src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
                                  height="0"
                                  width="0"
                                  style={{ display: 'none', visibility: 'hidden' }}
                              &gt;&lt;/iframe&gt;
                          &lt;/noscript&gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/html&gt;
          );
      }
  }
  </code></pre>
  
  <p>I've just changed one thing is _app.js to _app.tsx : </p>
  
  <pre><code>//_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(() =&gt; {
          const handleRouteChange = (url: string) =&gt; {
              gtag.pageview(url);
          };
          Router.events.on('routeChangeComplete', handleRouteChange);
          return () =&gt; {
              Router.events.off('routeChangeComplete', handleRouteChange);
          };
      }, []);
  
      return &lt;Component {...pageProps} /&gt;;
  }
  
  </code></pre>
  
  <p><a href="https://github.com/zeit/next.js/issues/160#issuecomment-634502987" rel="noreferrer">https://github.com/zeit/next.js/issues/160#issuecomment-634502987</a></p>