1

Code is below, the dev server works perfectly fine without error, however when I try to deploy the site I get this error.

> Build error occurred
TypeError: artists.map is not a function
    at getStaticPaths (/vercel/path0/.next/server/pages/artists/[slug].js:106:24)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:498:31)
    at async /vercel/path0/node_modules/next/dist/build/utils.js:641:119
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20) {
  type: 'TypeError'
}

export async function getStaticProps({ params }) {
  const siteSettings = await fetcher("http://localhost:3000/api/settings");
  const artists = await fetcher(
    `${process.env.URL}/api/artists/${params.slug}`
  );
  const artist = artists.allArtist[0];

  return {    
    props: {    
      siteSettings,    
      artist,    
    },    
  };    
} 

export async function getStaticPaths() {    
  const artists = await fetch(`${process.env.URL}/api/artists`);    
     
  return {                                                                                                           
    paths: artists.map((artist) => {                                                                                 
      return {    
        params: {    
          slug: artist.slug.current,    
        },    
      };    
    }),    
    fallback: false,    
  };    
}

How would I go about fixing this error, as I said it works perfectly fine in the dev server with no console logs containing any errors.

Any help would be greatly appreciated.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Mac Hooper
  • 105
  • 1
  • 8
  • Silly question - but is the URL environment variable set for prod env? – adrian Jan 11 '22 at 12:12
  • Check the network tab of your Browsers dev tools to see the request to /artists and check if the server address is correct. I would also guess that the URL env is not set. – Andreas Jagiella Jan 11 '22 at 12:27
  • @adrian yeah I’ve definitely set the production env variable – Mac Hooper Jan 11 '22 at 12:29
  • @Andreas Jagiella I can’t even check the browser tools, due to it crashing during the build time on Vervel. There are no errors on my localhost environment – Mac Hooper Jan 11 '22 at 12:30
  • You are calling getStaticPaths() when building, so your server has to be running in your build environment, right? Is this the case? In general you should think about some error handling when calling an external api, too. – Andreas Jagiella Jan 11 '22 at 12:39
  • 1
    Does this answer your question: [Fetch error when building Next.js static website in production](https://stackoverflow.com/questions/66202840/fetch-error-when-building-next-js-static-website-in-production)? You should not fetch from an internal API route in `getStaticProps`/`getStaticPaths`. Instead, directly import the logic used inside your API route. – juliomalves Jan 11 '22 at 21:07
  • I did try this after posting the question and it did work. So it was as simple as not using API routes in getStaticProps. – Mac Hooper Jan 12 '22 at 09:27

1 Answers1

-1

I attempted writing the API route logic directly in the getStaticProps function and this fixed the error @juliomalves also posted this link which suggests a similar answer: Fetch error when building Next.js static website in production

Thanks for the help.

Mac

Mac Hooper
  • 105
  • 1
  • 8
  • 1
    You should have a box at the top of your question asking you to confirm if the question is a duplicate. Use that instead of posting an answer that just points elsewhere. – miken32 Jan 13 '22 at 16:16