1

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

在我删除插件和几乎所有 id 的旁边后，我收到以下错误：

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

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

我们也通过 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
            }
        }
    }
`;

我不知道这是从哪里来的以及环境变量的含义。

4

2 回答 2

1

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

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

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

于 2021-08-13T09:42:12.770 回答
0

我能够通过从我的组件中删除所有 id 并再次添加其中一些来解决这个问题。

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

于 2021-08-16T17:13:03.323 回答