Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different getStaticPaths behavior with _app.js in development vs. production

See original GitHub issue

Bug report

Describe the bug

In _app.js, I have Amplify.configure(...) that stores a configuration for internal use with other Amplify features (e.g. API):

// pages/_app.js
import { Amplify, API } from "aws-amplify"

Amplify.configure({ ... })

export default function MyApp({ Component, pageProps }) {

// pages/index.js
import { API } from "aws-amplify"

export default function Home() {
  useEffect(() => {
	// API internally references the configuration in `Amplify`
    API.graphql(...).then(console.log)
  })
...

However, when using getStaticProps for a page, I found that the instance of Amplify isn’t configured when running next build. It’s as if _app.js isn’t imported or executed at all during the build!

To Reproduce

Simple reproduction here: https://github.com/ericclemmons/next.js-issues-16977/commit/bf9f827b937f74d44f6ae6224fc03250d27e6f80!

Notice how my static page pages/[isConfigured].js receives a value of true in development (due to _app.js setting the configuration) while false in production (because _app.js is presumably not called prior to executing getStaticPaths).

👇 This is my “real-world” code from when I discovered this behavior. It shouldn’t differ from the simpler reproduction above.

// pages/_app.js
console.log('🕵️‍♀️', 'pages/_app.js', 'imported')

import '../styles/globals.css'
import { Amplify } from 'aws-amplify'
import awsExports from '../src/aws-exports'

console.log('🕵️‍♀️', 'pages/_app.js', 'Amplify.configure')
Amplify.configure({ ...awsExports, ssr: true })
console.log('🕵️‍♀️', 'pages/_app.js', 'Amplify configuration', Amplify.configure())

export default function MyApp({ Component, pageProps }) {
  console.log('🕵️‍♀️', 'pages/_app.js', 'MyApp')

  return <Component {...pageProps} />
}

// pages/posts/[id].js
console.log('🕵️‍♀️', 'pages/[id].js', 'imported')

import { Amplify, API, withSSRContext } from 'aws-amplify'
import Head from 'next/head'
import { useRouter } from 'next/router'
import styles from '../../styles/Home.module.css'
import { getPost, listPosts } from '../../src/graphql/queries'
import { deletePost } from '../../src/graphql/mutations'

console.log('🕵️‍♀️', 'pages/[id].js', 'Amplify configuration', Amplify.configure())

export async function getStaticPaths() {
  console.log('🕵️‍♀️', 'pages/[id].js', 'getStaticPaths')

  const SSR = withSSRContext()
  const response = await SSR.API.graphql({ query: listPosts })
  const paths = response.data.listPosts.items.map((post) => ({
    params: { id: post.id },
  }))

  return {
    // Statically build pages at run-time, but SSR any new ones after
    // See: https://nextjs.org/docs/basic-features/data-fetching#fallback-pages
    fallback: false,
    paths,
  }
}

// `/pages/posts/[id].js` => `params.id`
export async function getStaticProps({ params }) {
  console.log('🕵️‍♀️', 'pages/[id].js', 'getStaticProps')

  const SSR = withSSRContext()
  const response = await SSR.API.graphql({
    query: getPost,
    variables: { id: params.id },
  })

  return {
    props: {
      post: response.data.getPost,
    },
  }
}

export default function Post({ post }) {
  console.log('🕵️‍♀️', 'pages/[id].js', 'Post')

  const router = useRouter()

  if (router.isFallback) {
    return <div>Loading post...</div>
  }

  async function handleDelete() {
    await API.graphql({
      authMode: 'AMAZON_COGNITO_USER_POOLS',
      query: deletePost,
      variables: { input: { id: post.id } },
    })

    window.location.href = '/'
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>{post.title} – Amplify + Next.js Blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <small className={styles.description}>
            <a href="/">Home</a> &raquo;
          </small>

          {post.title}
        </h1>
        <p className={styles.description}>{post.content}</p>
      </main>

      <footer className={styles.footer}>
        <button onClick={handleDelete}>🗑 Delete Post</button>
      </footer>
    </div>
  )
}