getStaticPaths not creating paths

Question

I have data folder that contains events.ts:

export const EventsData: Event[] = [
  {
    name: 'School-Uniform-Distribution',
    images: ['/community/conferences/react-foo.png', "/community/conferences/react-foo.png"],
  },
  {
    name: 'College-Uniform',
    images: ['/community/conferences/react-foo.png', "/community/conferences/react-foo.png"],
  },
];

type Event is:

export type Event = {
  name: string;
  images: string[];
};

I have the getStaticPath and getStaticProps methods in pages/our-contribution/[pid].tsx :

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const event = EventsData;
  console.log(event, "event")
  return {
    props: { event: event },
  };
};

export async function getStaticPaths() {

  // Get the paths we want to pre-render based on posts
  const paths = EventsData.map(event => ({
      params: {pid: event.name},
  }));
  console.log(paths, "paths")
  // We'll pre-render only these paths at build time.
  return {paths, fallback: false}
}

I get this error:

Can you help me, please ?

Update: This is the error trace for one route:

pages/our-contribution/[pid].tsx:

import { useRouter } from 'next/router';
import { GetStaticProps } from 'next';

import { Event } from 'types/event';
import {EventsData} from 'data/events';

type Props = {
  event: Event[];
};

const Event = ({event} : Props) => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Event: {event}</p>
}

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const event = EventsData;
  console.log(event, "event")
  return {
    props: { event: event },
  };
};

export async function getStaticPaths() {

  // Get the paths we want to pre-render based on posts
  const paths = EventsData.map(event => ({
      params: {pid: event.name},
  }));
  console.log(paths, "paths")
  // We'll pre-render only these paths at build time.
  return {paths, fallback: false}
}

export default Event

Answer 1

I think there are a couple of errors in the code. One error that block your build is

const Event = ({event} : Props) => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Event: {event}</p>
}

You can't directly print an object or array in tsx, you should convert the object first into string if you are trying to debug it. Something like:

  return <p>Event: {event.toString()}</p>

Then a i notice something strange in your variables name event props looks like a single event but instead you give an array of events i don't know if it is correct but maybe it should be like this:

type Props = {
  event: Event;
};

or it should be named:

type Props = {
  events: Event[];
};