Question

我正在尝试使用博客部署我的第一个 gatsby 站点，但它一直失败。我已经更新了我的所有依赖项，但现在我无法弄清楚到底是什么问题。

我真的很感激任何建议，这几天一直困扰着我。在此之前，我遇到了一堆 npm 错误，所以我更新了所有我认为可以解决问题的依赖项。

仅供参考，我在博客中使用了内容丰富的 cms

看起来这里构建失败了：

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

BlogElements.js 文件只是一个样式化的组件：

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

您的问题是因为 BlogElements 存储在 /pages 文件夹下，所以 Gatsby 试图根据该文件夹结构创建 URL 路径。由于您没有返回有效的 React 组件，因此您的代码正在崩溃。

如果您仅将 BlogElements 用于样式目的，请将其移至其他位置（例如，在 /src/components/styles 下）并在您需要的任何位置导入。

/pages 下的有效样式组件应如下所示：

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>
  )
}

请注意，与您的 UsersList 不同，上面的示例代码段将 BlogElements 作为 React 组件导出。

尝试在将项目推送到 Netlify 之前在本地构建项目以避免该错误。

Gatsby 站点的 Netlify 构建失败

1 个答案: