Netlify build fail for Gatsby site

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! [email protected] 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 [email protected] 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
`

Solution

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.