Amplify not working in production - get blank white screen

Describe the bug I’ve deployed my Gatsby project to netlify, and when I tried signing in, the entire screen goes white. I’m not sure if it’s an issue with the aws-exports.js file (it did create the user upon signup), or another issue.

To Reproduce

This project was built following along this tutorial: https://hackernoon.com/building-jamstack-applications-with-gatsby-and-aws-amplify-framework-d7e2b9e7117e

Expected behavior I expected to be able to log in, and then add products to my wishlist, which I can currently do in my local dev environment.

Smartphone (please complete the following information):

• Device: Macbook Pro (2016)
• OS: Catalina
• Browser [chrome]
• Version [e.g. 22]

"aws-amplify": "^3.0.8",
 "aws-amplify-react": "^4.1.7",

Sample code

gatsby-browser.js

import React from "react";
import Layout from "./src/components/layout";
import Amplify, { Auth } from 'aws-amplify'
import awsConfig from './aws-exports.js'
Amplify.configure(awsConfig)

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

dashboard.js (where users are supposed to sign up/sign in to their account:

import React from 'react'
import { graphql, Link } from 'gatsby'
import { withAuthenticator, Connect } from 'aws-amplify-react'
import { graphqlOperation } from 'aws-amplify'
import { listPostLikes } from '../graphql/queries'


const Dashboard = props => (
  <>
    <h1>Wishlist</h1>

    <Connect query={graphqlOperation(listPostLikes)}>
      {({ data: { listPostLikes }, loading, error }) => {
        if (error) return <h3>Error</h3>
        if (loading) return <h3>Loading...</h3>

        return listPostLikes.items.length ? (
          listPostLikes.items.map(item => {
            const { node: post } = props.data.allShopifyProduct.edges.find(
              ({ node }) => node.id === item.postId
            )
            return post ? (
              <h3 key={post.id}>
                <Link to={`/product/${post.handle}`}>
                  {post.title}
                </Link>
              </h3>
            ) : null
          })
        ) : (
          <h3>No Liked Products Yet!</h3>
        )
      }}
    </Connect>

  </>
)

export default withAuthenticator(Dashboard, true)

export const query = graphql`
  {
    allShopifyProduct(sort: { fields: [createdAt], order: DESC }) {
          edges {
            node {
              id
              title
              handle
              availableForSale
              createdAt
              
              variants {
                price
              }
            }
          }
        }
  }
`

[Dawidpol]

For me I also had to do the register of the services i use:

import { Amplify, API, Auth, Storage } from 'aws-amplify';
const awsExports = require('@/aws-exports').default;

Amplify.register(API)
Amplify.register(Storage)
Amplify.register(Auth)
/* Register the services before configure */
Amplify.configure(awsExports)

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.