NextJS/Authenticator error: "Missing getServerSnapshot, which is required for server-rendered content."

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create Next App

Please describe your bug.

When scaffolding a new Next.js app via npx create-next-app and trying to use the Authenticator component as documented, the app immediately breaks with a 500 internal server error:

Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.

What’s the expected behaviour?

The Authenticator component should render without any error and the app should build properly with yarn dev.

When the Authenticator is removed from index.js the app renders as expected.

Also, I tried both with/without wrapping _app.js with Authenticator.Provider and the error occurs in both approaches.

I feel like I’m maybe doing something wrong with my setup but can’t put my finger on it. The Amplify “Getting Started” docs for Next.js still uses import { AmplifyAuthenticator } from '@aws-amplify/ui-react-v1', but I wanted to work on some use cases for the new Authenticator with Next and haven’t found any relevant documentation on either the JS or UI docs site. I will update docs to use the new Authenticator component, but first want to make sure I am setting things up properly myself first.

Thanks for the help!

Help us reproduce the bug!

1. npx create-next-app@latest next-example
2. cd next-example && code .
3. yarn add aws-amplify @aws-amplify/ui-react
4. amplify add auth
5. amplify push
6. amplify init (default options)
7. Import the Authenticator component into index.js (snippet attached)
8. yarn dev
9. The error occurs immediately

Code Snippet

// pages/index.js

import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

export default function Home() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

// pages/_app.js

import { Amplify } from "aws-amplify";
import { Authenticator } from "@aws-amplify/ui-react";

import "../styles/globals.css";
import "@aws-amplify/ui-react/styles.css"; // default theme
import awsExports from "../src/aws-exports";

Amplify.configure({ ...awsExports, ssr: true });

export default function App({ Component, pageProps }) {
  return (
    <Authenticator.Provider>
      <Component {...pageProps} />
    </Authenticator.Provider>
  );
}

Additional information and screenshots

node -v
v16.14.2

{
  "name": "webpack-5-testing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^2.15.5",
    "aws-amplify": "^4.3.20",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5"
  }
}