title: Error when using usercentrics (via gtm) and id's in some components
body: <p>we try to switch from our own implemented CMP to usercentrics. Therefore we integrated usercentrics via gtm on our page. I realized that the element is only shown on our subpages and is not visible on our root page.
  After two days of removing and adding components again. I found out that usercentrics was able to load when I removed the <code>id={&quot;process&quot;}</code> from the component. I'm using multiple times the <code>id</code> tag for a smoothscroll plugin on our page. But only the one applied on the process and the one applied on the contact section are the ones that lead to the error below.</p>
  <p>After I removed the plugin and nearly all id's beside one, I got the following error:</p>
  <pre><code>Uncaught TypeError: Cannot read property 'REACT_APP_SC_ATTR' of undefined
      at bundle_legacy.js:1
      at bundle_legacy.js:15
  </code></pre>
  <p>We're using a Gatsby Stack with Typescript and <code>gatsby-plugin-smoothscroll</code> for scrolling.</p>
  <p>We implemented gtm via a Gatsby Plugin as well: <code>gatsby-plugin-google-tagmanager</code></p>
  <pre><code>import React from &quot;react&quot;;
  import colors from &quot;../../../../config/GlobalStyles&quot;;
  import {Container, Grid, makeStyles, Typography} from &quot;@material-ui/core&quot;;
  
  // @ts-ignore
  import infoGraphic from &quot;../../../../images/root/process/infographic.webp&quot;;
  import {graphql, useStaticQuery} from &quot;gatsby&quot;;
  import Markdown from &quot;markdown-to-jsx&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
      contentWrapper: {
          paddingTop: &quot;50px&quot;
      },
      container: {
          paddingTop: &quot;50px&quot;,
          backgroundColor: &quot;white&quot;,
      },
      headline: {
          fontWeight: 600,
          color: colors.main
      },
      secondHeadline: {
          fontFamily: &quot;Mackay&quot;,
          color: colors.main,
          fontWeight: 400,
      },
      infoGraphicWrapper: {
          overflow: &quot;scroll&quot;,
          [theme.breakpoints.down('sm')]: {
              marginTop: &quot;50px&quot;,
          },
          &quot;&amp; img&quot;: {
              [theme.breakpoints.down('sm')]: {
                  maxWidth: &quot;200%&quot;
              }
          }
      }
  }));
  
  export default function ProcessSection() {
      const classes = useStyles();
      const data = useStaticQuery(query);
  
      return (
          &lt;section&gt;
              &lt;Container className={classes.container}&gt;
                  &lt;Typography variant={&quot;h2&quot;} component={&quot;h2&quot;} className={classes.headline}&gt;
                      &lt;Markdown&gt;
                          {data.strapiHome.process.headline}
                      &lt;/Markdown&gt;
                  &lt;/Typography&gt;
                  &lt;Typography variant={&quot;h2&quot;} component={&quot;h2&quot;} className={classes.secondHeadline}&gt;
                      &lt;Markdown&gt;
                          {data.strapiHome.process.secondHeadline}
                      &lt;/Markdown&gt;
                  &lt;/Typography&gt;
                  &lt;Grid container className={classes.contentWrapper} justify={&quot;space-between&quot;}&gt;
                      &lt;Grid item xl={4} lg={4} md={4} sm={12} xs={12}&gt;
                          &lt;Typography component={&quot;div&quot;} variant={&quot;body2&quot;}&gt;
                              &lt;Markdown&gt;{data.strapiHome.process.text}&lt;/Markdown&gt;
                          &lt;/Typography&gt;
                      &lt;/Grid&gt;
                      &lt;Grid item xl={7} lg={7} md={7} sm={12} xs={12} className={classes.infoGraphicWrapper}&gt;
                          &lt;img src={infoGraphic} alt={&quot;alt text&quot;} /&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/Container&gt;
          &lt;/section&gt;
      );
  }
  
  const query = graphql`
      query {
          strapiHome {
              process {
                  headline
                  secondHeadline
                  text
              }
          }
      }
  `;
  </code></pre>
  <p>I have no idea where this is coming from and what the env variables mean.</p>