Gatsby Duplicate Data Output/Double Rendering - reactjs

Question

Im building a Gatsby + Contentful blog and in development everything worked just fine. But when I build the page it shows the entire website twice.
Everything should be inside <div id="___gatsby"></div>. But it also renders the <main> and <footer> the (entire website) again outside <div id="___gatsby"></div>
Heres an image:
gatsby renders entire website twice
Is there a problem with my Layout.js?
Layout.js
import React from 'react'
import Navbar from './Navbar'
import BeforeFooter from './BeforeFooter'
import Footer from './Footer'
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<BeforeFooter />
<Footer />
</>
)
}
export default Layout
Or could it be a plugin that is causing the error?
gatsby-config.js
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {
title: `Gatsby Contentful Blog`,
description: `Awesome Blog built with Gatsby and Contentful`,
titleTemplate: `%s Contentful Blog`,
url: `https://mdx-blog.netlify.app/`,
image: `mainImg.png`,
twitterUsername: `#john`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
`gatsby-remark-images`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `assets`,
path: `${__dirname}/src/assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: ``,
// Learn about environment variables: https://gatsby.dev/env-vars
accessToken: ``,
forceFullSync: true,
},
},
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Roboto`,
variants: [`400`, `500`, `700`],
},
{
family: `Open Sans`,
},
{
family: `Teko`,
},
],
},
},
{
resolve: `gatsby-plugin-gdpr-cookies`,
options: {
googleAnalytics: {
trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
// Setting this parameter is optional
anonymize: true
},
facebookPixel: {
pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
},
// Defines the environments where the tracking should be available - default is ["production"]
environments: ['production', 'development']
},
},
],
}
Im very new to this stack and I cant understand what Ive done wrong... Let me know if you guys can help me or need to see more of my code to help.
Anyone knows if its an actual layout problem?

Answer 1

It seems that you are rendering the <Layout> component inside <Navbar>, <BeforeFooter> (seems this), or <Footer> component.
<Layout> also renders the <NavBar>, <BeforeFooter>, and <Footer> components in addition they can also render another components including that renders the <Layout>, so calling them inside another component will duplicate (or more) the full layout.
Try removing (or commenting) each component in <Layout> to check what is causing the issue in order to debug more.