在某些组件中使用 usercentrics（通过 gtm）和 id 时出错

Question

我们尝试从我们自己实施的 CMP 切换到以用户为中心。因此，我们通过页面上的 gtm 集成了 usercentrics。我意识到该元素只显示在我们的子页面上，在我们的根页面上不可见。两天后再次删除和添加组件。当我从组件中删除 id={"process"} 时，我发现 usercentrics 能够加载。我在页面上多次使用 id 标签作为 smoothscroll 插件。但是只有应用在工艺上的和应用在接触部分的才是导致下面错误的。

在我删除了插件和几乎所有的 id 之后，我得到了以下错误：

Uncaught TypeError: Cannot read property 'REACT_APP_SC_ATTR' of undefined
    at bundle_legacy.js:1
    at bundle_legacy.js:15

我们使用带有 Typescript 的 Gatsby Stack 和 gatsby-plugin-smoothscroll 进行滚动。

我们也通过 Gatsby 插件实现了 gtm：gatsby-plugin-google-tagmanager

import React from "react";
import colors from "../../../../config/GlobalStyles";
import {Container, Grid, makeStyles, Typography} from "@material-ui/core";

// @ts-ignore
import infoGraphic from "../../../../images/root/process/infographic.webp";
import {graphql, useStaticQuery} from "gatsby";
import Markdown from "markdown-to-jsx";

const useStyles = makeStyles((theme) => ({
    contentWrapper: {
        paddingTop: "50px"
    },
    container: {
        paddingTop: "50px",
        backgroundColor: "white",
    },
    headline: {
        fontWeight: 600,
        color: colors.main
    },
    secondHeadline: {
        fontFamily: "Mackay",
        color: colors.main,
        fontWeight: 400,
    },
    infoGraphicWrapper: {
        overflow: "scroll",
        [theme.breakpoints.down('sm')]: {
            marginTop: "50px",
        },
        "& img": {
            [theme.breakpoints.down('sm')]: {
                maxWidth: "200%"
            }
        }
    }
}));

export default function ProcessSection() {
    const classes = useStyles();
    const data = useStaticQuery(query);

    return (
        <section>
            <Container className={classes.container}>
                <Typography variant={"h2"} component={"h2"} className={classes.headline}>
                    <Markdown>
                        {data.strapiHome.process.headline}
                    </Markdown>
                </Typography>
                <Typography variant={"h2"} component={"h2"} className={classes.secondHeadline}>
                    <Markdown>
                        {data.strapiHome.process.secondHeadline}
                    </Markdown>
                </Typography>
                <Grid container className={classes.contentWrapper} justify={"space-between"}>
                    <Grid item xl={4} lg={4} md={4} sm={12} xs={12}>
                        <Typography component={"div"} variant={"body2"}>
                            <Markdown>{data.strapiHome.process.text}</Markdown>
                        </Typography>
                    </Grid>
                    <Grid item xl={7} lg={7} md={7} sm={12} xs={12} className={classes.infoGraphicWrapper}>
                        <img src={infoGraphic} alt={"alt text"} />
                    </Grid>
                </Grid>
            </Container>
        </section>
    );
}

const query = graphql`
    query {
        strapiHome {
            process {
                headline
                secondHeadline
                text
            }
        }
    }
`;

我不知道这是从哪里来的，也不知道环境变量是什么意思。

Answer 1

我认为你的问题不在代码中。在我看来，它与 .env 文件有关。

如果您在某处使用 process.env.REACT_APP_SC_ATTR，请检查 .env 文件以查看是否定义了 REACT_APP_SC_ATTR。

.env 文件就像一个全局配置。我们通常添加服务器 url、端口、生产模式，诸如此类。

Answer 2

我能够通过从我的组件中删除所有 ID 并重新添加其中一些来解决问题。

我无法理解为什么会这样。

在某些组件中使用 usercentrics（通过 gtm）和 id 时出错

Error when using usercentrics (via gtm) and id's in some components

javascript

typescript

reactjs

cookieconsent