我们尝试从我们自己实施的 CMP 切换到 usercentric。因此，我们通过 gtm 在我们的页面上集成了 usercentric。我意识到该元素仅显示在我们的子页面上，在我们的根页面上不可见。 经过两天的移除和再次添加组件。我发现当我从组件中删除 id={"process"> 时，usercentric 能够加载。我多次在我们的页面上使用 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
            }
        }
    }
`;

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