title: Gatsby production build is different from local build
body: <p>I have a weird result in my production build that is not replicated in my local development build. I'm using Gatsby with ReactBootstrap to make Tabs and a Carousel. I've coded the app so that if the screen width is less than 576, the carousel component is loaded, otherwise, the tab component is loaded.</p>
  <p>So here's the problem. The first two HTML nodes in service_carousel.js i.e the Container and Carousel tags, are added on page load and become the wrapper for the service_tabs.js code. I don't know why. The services_tabs.js code should be loaded since I'm viewing it from a laptop screen and should only have the nodes specified in services_tabs.js. If I inspect the code and change the device to a phone, the error is fixed and the tags are removed even if I switch back to a large screen. However, if you reload the page the error comes back.</p>
  <p>Here's a code sandbox with the full code <a href="https://codesandbox.io/s/sad-glade-u8j9g" rel="nofollow noreferrer">https://codesandbox.io/s/sad-glade-u8j9g</a></p>
  <p>My code is as follows:</p>
  <p>service_tabs.js</p>
  <pre><code>import React from 'react';
  import styles from './service_tabs.module.scss';
  
  import { TabContent } from '../component_barrel';
  
  import {
    Tab,
    Tabs,
    Row,
    Col,
  } from '../../utils/bootstrap_imports_barrel';
  
  import useData from '../../utils/useData';
  
  const tab_data = useData.tab_data;
  
  const ServiceTabs = () =&gt; (
    &lt;Row className=&quot;justify-content-center p-4&quot;&gt;
      &lt;Col lg={10} md={9} className=&quot;align-self-center&quot;&gt;
        &lt;Tabs justify className={styles.custom_tabs} defaultActiveKey=&quot;item 1&quot; id=&quot;uncontrolled-tab-example&quot;&gt;
          {
            tab_data.map(({ tab_title, title, icon, image, content }, index) =&gt; {
              const key = `item ${index + 1}`;
  
              return (
                &lt;Tab eventKey={key} key={key} title={tab_title}&gt;
                  &lt;TabContent
                    icon={icon}
                    image={image}
                    title={title}
                    content={content}
                  /&gt;
                &lt;/Tab&gt;
              )
            })
          }
        &lt;/Tabs&gt;
      &lt;/Col&gt;
    &lt;/Row&gt;
  );
  
  export default ServiceTabs;
  </code></pre>
  <p>service_carousel.js</p>
  <pre><code>import React from 'react';
  
  import {
    Container,
    Carousel,
  } from '../../utils/bootstrap_imports_barrel';
  
  import styles from './service_carousel.module.scss';
  import { TabContent } from '../component_barrel';
  import useData from '../../utils/useData';
  
  const tab_data = useData.tab_data;
  
  const ServiceCarousel = () =&gt; (
    &lt;Container className=&quot;p-0&quot; fluid&gt;
      &lt;Carousel className=&quot;py-4&quot; controls={false} indicators={false} touch={true}&gt;
        {
          tab_data.map(({ title, icon, image, content }, index) =&gt; {
            const key = `item ${index + 1}`;
  
            return (
              &lt;Carousel.Item key={key} className={styles.carousel_container}&gt;
                &lt;TabContent
                  icon={icon}
                  image={image}
                  title={title}
                  content={content}
                /&gt;
              &lt;/Carousel.Item&gt;
            )
          })
        }
      &lt;/Carousel&gt;
    &lt;/Container&gt;
  );
  
  export default ServiceCarousel;
  </code></pre>
  <p>and the main service.js</p>
  <pre><code>import React from 'react';
  
  import {
    ServiceTabs,
    ServiceCarousel
  } from './component_barrel'
  
  import { useWindowWidth } from '@react-hook/window-size';
  
  const Service = () =&gt; {
  
    const width = useWindowWidth();
    const componentLoaded = width &gt; 576 ? &lt;ServiceTabs /&gt; : &lt;ServiceCarousel /&gt;;
  
    return (
      &lt;div className=&quot;service_container&quot;&gt;
        {componentLoaded}
      &lt;/div&gt;
    );
  };
  
  export default Service;
  </code></pre>