Fallback not working.

Issue Summary

Server is not redirecting to the 404 page if the page does not exist. Instead it shows an ugly s3 404 error: Our getStaticPaths hook look like this:

export async function getStaticPaths() {
  let paths = []
  let allVenues
  let errors
  const fallback = true //If fallback is false, then any paths not returned by getStaticPaths will result in a 404 page. SETTING TO TRUE WILL ENABLE US TO QUERY IN REAL TIME IF NEW PATH COMES TO LIGHT...

  const perPage = 100
  let done = false
  for (let page = 0; !done && !errors; page++) {
    const { error, venues } = await getVenuesSSR({ page, perPage })
    allVenues = allVenues ? [...allVenues, ...venues] : venues
    done = venues?.length === 0
    errors = error ? error : undefined
    errors = venues === undefined && errors === undefined ? 'error' : errors
  }

  //  venues/seatgeek/venue/{seatgeekVenueId}/parking
  //  venues/[city-name]/[venueid]/[venue-name]/parking
  if (errors || !allVenues) {
    // paths = []
    // TODO: SENTRY LOG
  } else {
    const seatGeekpaths = allVenues
      .filter(venueWithGoodStatus => venueWithGoodStatus.status !== 'hidden')
      .filter(venueWithSeatGeekId => venueWithSeatGeekId.seatGeekId !== null)
      .map(venue => {
        return {
          params: {
            slug: [
              'seatgeek',
              'venue',
              venue?.seatGeekId?.toString(),
              'parking',
            ],
          },
        }
      })

    const allpaths = allVenues
      .filter(venueWithGoodStatus => venueWithGoodStatus.status !== 'hidden')
      .map(venue => {
        const cityNameEncoded = getEncodedCityNameFromVenue({ venue })
        const venueNameEncoded = getEncodedVenueNameFromVenue({ venue })

        return {
          params: {
            slug: [
              cityNameEncoded,
              venue?.id?.toString(),
              venueNameEncoded,
              'parking',
            ],
          },
        }
      })
    paths = [...seatGeekpaths, ...allpaths]
  }

  return {
    fallback,
    paths,
  }
}

And we have placed a check inside render like this: Also if i set fallback: false it shows exact same error.

Actual behavior

Whenever i miss spell static page it throws s3 error.

Expected behavior

It should show loading or custom 404 page.

Screenshots/Code/Configuration/Logs

serverless.yml looks like this:

Versions

• OS/Environment:
• @sls-next/serverless-component version: 3.2.0-alpha.20
• Next.js version: ^10.2.3

If someone could help it would be great.

[Talhafayyaz11]

The problem is that it is not falling back to given fallback URL when CloudFront hits wrong s3 key.

[Talhafayyaz11]

@dphang thank you. You are a super star!