Custom 404 not working using next-with-apollo

[alnorris]

Describe the bug

pages/404.tsx is not shown on unregistered pages. Whilst on locally built version, and dev, it works fine.

Actual behavior

Shows the default next 404 isntead.

Expected behavior

Show the 404 pages at page/404.tsx

• OS/Environment:
• @sls-next/serverless-component version: @sls-next/serverless-component@3.1.0
• Next.js version: ^11.0.1

[dphang]

Can you please fill in more details, like whether you are deploying from Windows / Ubuntu / Mac / etc. and also provide the serverless.yml / next.config.js / how the 404.tsx code looks like (or if you can, provide a minimal repro on a GH repo, so we can debug it ourselves), as the runtime routing can differ based on your configuration.

And please confirm how .serverless_nextjs/assets/static-pages/<build-id> looks like, it should contain the custom 404.html page and whether it is uploaded correctly into the s3 bucket (if not, then it's likely a build/copy issue vs. runtime routing issue).

Otherwise I will assume you are using Mac and just a basic app (no basepath, no locales).

I tried with the e2e test apps on 11.0.1 (with locales and with/without basepath) which also do have tests for custom 404s, and could not repro any issues with a custom 404.tsx page. For example the next app https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/e2e-tests/next-app and https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/e2e-tests/next-app-with-locales

[alnorris]

Hi @dphang, I've been able to find that it is next-with-apollo causing the issue, but it only is an issue when with this package. Strangely the static-pages has the custom 404 in there. The 404 is just a plain component

import '../styles/globals.css'
import withApollo from 'next-with-apollo';
import { getDataFromTree } from "@apollo/client/react/ssr"
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

function MyApp({ Component, pageProps, apollo }: any) {
  return (
    <ApolloProvider client={apollo}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default withApollo((ctx) => {
  return new ApolloClient({
    uri: 'https://api.spacex.land/graphql',
    cache: new InMemoryCache().restore(ctx.initialState || {}),
    ssrMode: true
  });
})(MyApp, { getDataFromTree });

function Notfound() {
  return <div>Custom 404</div>
}

export default Notfound

[alnorris]

A little bit more investigation I found out removing getDataFromTree gets it working again. This option disables all Automatic Static Optimization. This may be something to do with it?

[jvarho]

A little bit more investigation I found out removing getDataFromTree gets it working again. This option disables all Automatic Static Optimization. This may be something to do with it?

Not sure why it works for you locally, but the 404 page is not supposed to support SSR: https://nextjs.org/docs/messages/404-get-initial-props