How to add a new component to a homepage on Gatsby?

dmxt 0
Viewed 19

Introduction

Hello guys! All I want to do is to add a new section to homepage on Gatsby but I'm having trouble with it.

I cloned some simple blog on Gatsby and now I want to add a new section to a homepage to pages/index.js

I tried to add a simple return ( <p>test</p> ) section to test if I can add a new section to a home page, but it didn't work out.

Finally I googled and found the official tutorial, then I started following their tutorial...

What I did

  1. I added a new component page at src/components/newSection.js with the following code:
import React from "react"
import Layout from "../components/layout"

export default function NewSection({ children }) {
  return (
    <Layout>
      <p>New Section</p>
    </Layout>
  )
}
  1. Then, I added new code to pages/index.js
import NewSection from "../components/newSection"

const NewSectionIndex = () => {
  return (
    <NewSection>test</NewSection>
  )
}
  1. Then I added this on the same page, pages/index.js
export default NewSectionIndex

Conclusion: an error

I thought I did everything right, but Gatsby returned an error: Only one default export allowed per module.

Screenshot: Gatsby compile error

It's saying I can't export multiple modules on the same page.

My question

How do I add a new section to a homepage at this point?! I tried looking up and got no answer. I'm lost here, and an official tutorial isn't helping.

I hope you can help me out!

.

.

.

My full code

src/components/newSection.js

import React from "react"
import Layout from "../components/layout"

export default function NewSection({ children }) {
  return (
    <Layout>
      <p>New Section</p>
    </Layout>
  )
}

page/index.js

Note: I marked my code change with /******* START ******/ and /******* END ******/

import * as React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"
/******* START ******/
import NewSection from "../components/newSection"

const NewSectionIndex = () => {
  return (
    <NewSection>test</NewSection>
  )
}
/******* END ******/

const BlogIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const posts = data.allMarkdownRemark.nodes
  
  if (posts.length === 0) {
    return (
      <Layout location={location} title={siteTitle}>
        <Bio />
        <p>
          No blog posts found. Add markdown posts to "content/blog" (or the
          directory you specified for the "gatsby-source-filesystem" plugin in
          gatsby-config.js).
        </p>
      </Layout>
    )
  }

  return (
    <Layout location={location} title={siteTitle}>
      <Bio />
      <ol style={{ listStyle: `none` }}>
        {posts.map(post => {
          const title = post.frontmatter.title || post.fields.slug

          return (
            <li key={post.fields.slug} className={`post-section`}>
              <article
                className="post-list-item"
                itemScope
                itemType="http://schema.org/Article"
              >
                <header>
                  <h2>
                    <Link to={post.fields.slug} itemProp="url">
                      <span itemProp="headline">{title}</span>
                    </Link>
                  </h2>
                  <small className={"post-list-date"}>{post.frontmatter.date}</small>
                </header>
                <section>
                  <p
                    dangerouslySetInnerHTML={{
                      __html: post.frontmatter.description || post.excerpt,
                    }}
                    itemProp="description"
                  />
                </section>
              </article>
            </li>
          )
        })}
      </ol>
    </Layout>
  )
}

export default BlogIndex
/******* START ******/
export default NewSectionIndex
/******* END ******/

/**
 * Head export to define metadata for the page
 *
 * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
 */
export const Head = () => <Seo title="All posts" />

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`
gatsby-plugin react-component gatsby reactjs javascript
1 Answers

I fixed it, here's how:

(Please note I renamed from newSection.js to section.js)

  1. Add a component with the following code

src/components/section.js

import React from "react"

export default function Section({ children }) {
  return (
    <div>
      {children}
    </div>
  )
}
  1. Import to the homepage before using the component

pages/index.js

import Section from "../components/section"
  1. Add the following on the home page

pages/index.js

<Section><p>This is a new component. Put anything here.</p></Section>

To somewhere visible on the home page, and then you'll see it.

What did I do wrong?

I'm not supposed to write a new function or use export default on index.js. All I need to use the new function I created with in a new component file by putting <Section /> or <Section><p>Put anything here</p></Section>

dmxt0
Related