Netlify build fail for Gatsby site - deployment

Question

I am trying to deploy my first gatsby site, with a blog but it keeps failing. Ive updated all my dependancies but now I cant figure out what exactly is the issue.
I would really appreciate any advice, its been bugging me for days. Before this, I got a bunch of npm errors so I updated all the dependancies which I thought would do the trick.
FYI Im using contentful cms for the blog
It looks like the build failed here:
12:33:55 PM: error A page component must export a React component for it to be valid. Please make sure this file exports a React component:
12:33:55 PM: /opt/build/repo/src/pages/BlogElements.js
12:33:55 PM: not finished createPagesStatefully - 0.064s
12:33:55 PM: npm ERR! code ELIFECYCLE
12:33:55 PM: npm ERR! errno 1
12:33:55 PM: npm ERR! gatsby-starter-hello-world#0.1.0 build: `gatsby build`
12:33:55 PM: npm ERR! Exit status 1
12:33:55 PM: npm ERR!
12:33:55 PM: npm ERR! Failed at the gatsby-starter-hello-world#0.1.0 build script.
12:33:55 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
12:33:55 PM: npm ERR! A complete log of this run can be found in:
12:33:55 PM: npm ERR! /opt/buildhome/.npm/_logs/2021-01-02T12_33_55_072Z-debug.log
The BlogElements.js file is just a styled component:
import styled from 'styled-components';
export const Styledh2 = styled.h2`
color: purple;
`;
export const StyledBox = styled.li`
width: 500px;
background-color: lightblue;
float: left
`
export const StyledLink = styled.div`
background-color: yellow;
position: relative;
left: 3rem;
justify-content: space-around
`

Answer 1

Your issue comes because BlogElements is stored under /pages folder so Gatsby is trying to create URL paths based on that folder structure. Since you are not returning a valid React component, your code is breaking.
If you are using BlogElements only for styling purpose, move it to another location (for example, under /src/components/styles) and import it wherever you need.
A valid styled-component under /pages should look like this:
import React from "react"
import styled from "styled-components"
const Container = styled.div`
margin: 3rem auto;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`
const UserWrapper = styled.div`
display: flex;
align-items: center;
margin: 0 auto 12px auto;
&:last-child {
margin-bottom: 0;
}
`
const Avatar = styled.img`
flex: 0 0 96px;
width: 96px;
height: 96px;
margin: 0;
`
const Description = styled.div`
flex: 1;
margin-left: 18px;
padding: 12px;
`
const Username = styled.h2`
margin: 0 0 12px 0;
padding: 0;
`
const Excerpt = styled.p`
margin: 0;
`
const User = props => (
<UserWrapper>
<Avatar src={props.avatar} alt="" />
<Description>
<Username>{props.username}</Username>
<Excerpt>{props.excerpt}</Excerpt>
</Description>
</UserWrapper>
)
export default function UsersList() {
return (
<Container>
<h1>About Styled Components</h1>
<p>Styled Components is cool</p>
<User
username="Jane Doe"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
<User
username="Bob Smith"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
</Container>
)
}
Note that the sample snippet above is exporting a UsersList as a React component unlike your BlogElements.
Try to build your project locally before pushing it to Netlify to avoid that errors.