useEffect 错误：缩小的 React 错误 #321（GTM 实现而不是 google 分析）答案

【问题标题】：useEffect Error: Minified React error #321 (GTM implementation instead of google analitycs)useEffect 错误：缩小的 React 错误 #321（GTM 实现而不是 google 分析）
【发布时间】：2020-09-13 11:39:26
【问题描述】：

为什么我在 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。我遵循了来自

的 Zeit 示例

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

我指出了一些重要的事情，这个例子向我们展示了如何添加 google 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

【问题讨论】：

完整的错误是什么？错误消息告诉您到哪里可以找到完整的错误。
如果有帮助的话，我更新了完整的错误

标签： reactjs next.js gtag.js

【解决方案1】：

我认为发生这种情况的原因有很多。我遇到了这个问题，因为我使用 --legacy-peer-deps 推送了一个包安装，因为它的 peerDependencies 卡在了 "react": 16.x。

我不确定为什么这会完全破坏构建，但是删除有问题的包（并用我自己的分叉版本替换它并增加 peerDependencies）让一切恢复正常。

【讨论】：

【解决方案2】：

当自动导入导入钩子（例如 useState 从错误的来源）时，我遇到了这个问题。如果你正在做：

import { useState } from 'react/cjs/react.production.min';

你应该这样做：

import React, { useState} from 'react';

【讨论】：

在我的情况下也有同样的问题

【解决方案3】：

这可能是因为您在页面上导入了两次 React：

import { useEffect } from 'react';
import Router from 'next/router';

import React, { ReactElement } from 'react';

应该是：

import React, { useEffect, ReactElement } from 'react';
import Router from 'next/router';

编辑

尝试从本地项目中删除 node_modules 和 .next 文件夹，然后再次运行 npm run build。这似乎为我解决了问题。

【讨论】：

我经历了同样的错误，但仍然是错误...（我更新了错误消息，因为我得到了新消息）
嗨詹姆斯。我试过你的解决方案，它的工作！希望这个错误不会再出现。你知道我为什么会收到这个错误吗？以及如何躲避/避免它？（我试着理解）你认为我的文件是因为 node_modules / .next 或类似的东西而“损坏”的吗？非常感谢您的宝贵时间，您对我的帮助很大，我真的很感激！
就我而言，我使用的 IDE 添加了额外的导入。打破了我的头几个小时，这个答案在这里有所帮助。感觉很傻?布里尔！
没想到它会起作用，但它确实起作用了！我之前也必须像这样安装打字稿： npm install --save-dev typescript @types/react @types/node