[BUG] Runtime Error in AppContent Component: useUser Hook Fails with AWS Amplify Authenticator

[axelpina]

Describe the bug

When running the application, an error occurs within the <AppContent> component related to AWS Amplify's authentication. Specifically, the error seems to originate from the usage of the useUser hook, causing the component tree to fail and triggering the ErrorBoundary. This prevents the application from rendering correctly and interrupts the user experience.

Error message:

The above error occurred in the <AppContent> component:

AppContent@http://localhost:5173/src/components/AppContent.tsx:38:20
AuthenticatorInternal@http://localhost:5173/node_modules/.vite/deps/@aws-amplify_ui-react.js?v=53795d0e:38959:31
AuthenticatorProvider@http://localhost:5173/node_modules/.vite/deps/@aws-amplify_ui-react.js?v=53795d0e:16899:31
Authenticator@http://localhost:5173/node_modules/.vite/deps/@aws-amplify_ui-react.js?v=53795d0e:38993:18
AuthAmplify@http://localhost:5173/src/components/AuthAmplify.tsx:23:21
AuthenticatorProvider@http://localhost:5173/node_modules/.vite/deps/@aws-amplify_ui-react.js?v=53795d0e:16899:31
ErrorBoundary@http://localhost:5173/node_modules/.vite/deps/react-error-boundary.js?v=53795d0e:18:5
App@http://localhost:5173/src/App.tsx:39:23
RenderedRoute@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=51795d0e:4037:7
RenderErrorBoundary@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=51795d0e:3994:5
DataRoutes@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=51795d0e:5156:7
Router@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=51795d0e:4423:7
RouterProvider@http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=51795d0e:4971:7

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

To Reproduce

1. Ensure project is up to date with the bec3aee4e63e5137a17ea5ed97b7ac5d38e4d3b1 PR.
2. Clear node_modules
3. Run npm i in /frontend
4. Run npm run dev
5. When started the application should show the error page

Screenshots

Additional context

1. Potential Causes Investigated:

   • Context Misconfiguration: Ensured that all necessary context providers, such as AuthProvider, are correctly wrapping the component tree.
   • Hook Implementation: Reviewed the useUser hook to confirm it properly consumes context without missing providers.
   • AWS Amplify Configuration: Verified that Amplify is correctly initialized with the appropriate configuration files.

2. Steps already taken:

   • Verified that AWS Amplify is correctly configured and initialized in the project.
   • Ensured that all context providers required by useUser are properly set up in the component hierarchy.
   • Updated all dependencies to their latest versions to rule out compatibility issues.
   • Attempted to isolate the issue by simplifying the AppContent component, but the error persists.

[statefb]

Tried npm ci && npm run dev with HEAD commit, but not reproduced.

[axelpina]

Here's another section of the error:

It's worth noting that this happens after I have authenticated myself.

Things I've tried:

1. Generated another package-lock.json
2. Cleared browser cookies
3. Tried multiple browsers just to make sure

I am confused since my fork is a 1:1 with this project with the exception of the additions of https://github.com/aws-samples/bedrock-claude-chat/commit/bec3aee4e63e5137a17ea5ed97b7ac5d38e4d3b1. I think it's also worth noting that this is happening in local development, I have not pushed it to the cloudformation stack as well. However, before I updated to https://github.com/aws-samples/bedrock-claude-chat/commit/bec3aee4e63e5137a17ea5ed97b7ac5d38e4d3b1 I could start the frontend with no problems at all.

Any suggestions are welcome.

Thank you in advance.

[statefb]

It still hasn't been reproduced. The cause could be the Vite plugins. I'll keep this issue open in case anyone else is facing the same problem.

[Yukinobu-Mine]

@axelpina Could you please show the API response obtained by useConversationApi().getConversations() ? https://github.com/aws-samples/bedrock-claude-chat/blob/bec3aee4e63e5137a17ea5ed97b7ac5d38e4d3b1/frontend/src/hooks/useConversationApi.ts#L23-L27

[axelpina]

Response:

import { useSWRConfig } from "/node_modules/.vite/deps/swr.js?v=06194052";
import useHttp from "/src/hooks/useHttp.ts";
const useConversationApi = () => {
  const http = useHttp();
  const { mutate } = useSWRConfig();
  const updateTitle = (conversationId, title) => {
    return http.patch(`conversation/${conversationId}/title`, {
      newTitle: title
    });
  };
  return {
    getConversations: () => {
      return http.get("conversations", {
        keepPreviousData: true
      });
    },
    getConversation: (conversationId) => {
      return http.get(
        !conversationId ? null : `conversation/${conversationId}`,
        {
          keepPreviousData: true
        }
      );
    },
    postMessage: (input) => {
      return http.post("conversation", {
        ...input
      });
    },
    getRelatedDocuments: (input) => {
      return http.post(
        "conversation/related-documents",
        {
          ...input
        }
      );
    },
    deleteConversation: (conversationId) => {
      return http.delete(`conversation/${conversationId}`);
    },
    clearConversations: () => {
      return http.delete("conversations");
    },
    updateTitle,
    updateTitleWithGeneratedTitle: async (conversationId) => {
      const res = await http.getOnce(`conversation/${conversationId}/proposed-title`);
      return updateTitle(conversationId, res.data.title);
    },
    mutateConversations: (conversations, options) => {
      return mutate("conversations", conversations, options);
    }
  };
};
export default useConversationApi;

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZUNvbnZlcnNhdGlvbkFwaS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNdXRhdG9yQ2FsbGJhY2ssIHVzZVNXUkNvbmZpZyB9IGZyb20gJ3N3cic7XHJcbmltcG9ydCB7XHJcbiAgQ29udmVyc2F0aW9uLFxyXG4gIENvbnZlcnNhdGlvbk1ldGEsXHJcbiAgR2V0UmVsYXRlZERvY3VtZW50c1JlcXVlc3QsXHJcbiAgR2V0UmVsYXRlZERvY3VtZW50c1Jlc3BvbnNlLFxyXG4gIFBvc3RNZXNzYWdlUmVxdWVzdCxcclxuICBQb3N0TWVzc2FnZVJlc3BvbnNlLFxyXG59IGZyb20gJy4uL0B0eXBlcy9jb252ZXJzYXRpb24nO1xyXG5pbXBvcnQgdXNlSHR0cCBmcm9tICcuL3VzZUh0dHAnO1xyXG5cclxuY29uc3QgdXNlQ29udmVyc2F0aW9uQXBpID0gKCkgPT4ge1xyXG4gIGNvbnN0IGh0dHAgPSB1c2VIdHRwKCk7XHJcbiAgY29uc3QgeyBtdXRhdGUgfSA9IHVzZVNXUkNvbmZpZygpO1xyXG5cclxuICBjb25zdCB1cGRhdGVUaXRsZSA9IChjb252ZXJzYXRpb25JZDogc3RyaW5nLCB0aXRsZTogc3RyaW5nKSA9PiB7XHJcbiAgICByZXR1cm4gaHR0cC5wYXRjaChgY29udmVyc2F0aW9uLyR7Y29udmVyc2F0aW9uSWR9L3RpdGxlYCwge1xyXG4gICAgICBuZXdUaXRsZTogdGl0bGUsXHJcbiAgICB9KTtcclxuICB9O1xyXG5cclxuICByZXR1cm4ge1xyXG4gICAgZ2V0Q29udmVyc2F0aW9uczogKCkgPT4ge1xyXG4gICAgICByZXR1cm4gaHR0cC5nZXQ8Q29udmVyc2F0aW9uTWV0YVtdPignY29udmVyc2F0aW9ucycsIHtcclxuICAgICAgICBrZWVwUHJldmlvdXNEYXRhOiB0cnVlLFxyXG4gICAgICB9KTtcclxuICAgIH0sXHJcbiAgICBnZXRDb252ZXJzYXRpb246IChjb252ZXJzYXRpb25JZD86IHN0cmluZykgPT4ge1xyXG4gICAgICByZXR1cm4gaHR0cC5nZXQ8Q29udmVyc2F0aW9uPihcclxuICAgICAgICAhY29udmVyc2F0aW9uSWQgPyBudWxsIDogYGNvbnZlcnNhdGlvbi8ke2NvbnZlcnNhdGlvbklkfWAsXHJcbiAgICAgICAge1xyXG4gICAgICAgICAga2VlcFByZXZpb3VzRGF0YTogdHJ1ZSxcclxuICAgICAgICB9XHJcbiAgICAgICk7XHJcbiAgICB9LFxyXG4gICAgcG9zdE1lc3NhZ2U6IChpbnB1dDogUG9zdE1lc3NhZ2VSZXF1ZXN0KSA9PiB7XHJcbiAgICAgIHJldHVybiBodHRwLnBvc3Q8UG9zdE1lc3NhZ2VSZXNwb25zZT4oJ2NvbnZlcnNhdGlvbicsIHtcclxuICAgICAgICAuLi5pbnB1dCxcclxuICAgICAgfSk7XHJcbiAgICB9LFxyXG4gICAgZ2V0UmVsYXRlZERvY3VtZW50czogKGlucHV0OiBHZXRSZWxhdGVkRG9jdW1lbnRzUmVxdWVzdCkgPT4ge1xyXG4gICAgICByZXR1cm4gaHR0cC5wb3N0PEdldFJlbGF0ZWREb2N1bWVudHNSZXNwb25zZT4oXHJcbiAgICAgICAgJ2NvbnZlcnNhdGlvbi9yZWxhdGVkLWRvY3VtZW50cycsXHJcbiAgICAgICAge1xyXG4gICAgICAgICAgLi4uaW5wdXQsXHJcbiAgICAgICAgfVxyXG4gICAgICApO1xyXG4gICAgfSxcclxuICAgIGRlbGV0ZUNvbnZlcnNhdGlvbjogKGNvbnZlcnNhdGlvbklkOiBzdHJpbmcpID0+IHtcclxuICAgICAgcmV0dXJuIGh0dHAuZGVsZXRlKGBjb252ZXJzYXRpb24vJHtjb252ZXJzYXRpb25JZH1gKTtcclxuICAgIH0sXHJcbiAgICBjbGVhckNvbnZlcnNhdGlvbnM6ICgpID0+IHtcclxuICAgICAgcmV0dXJuIGh0dHAuZGVsZXRlKCdjb252ZXJzYXRpb25zJyk7XHJcbiAgICB9LFxyXG4gICAgdXBkYXRlVGl0bGUsXHJcbiAgICB1cGRhdGVUaXRsZVdpdGhHZW5lcmF0ZWRUaXRsZTogYXN5bmMgKGNvbnZlcnNhdGlvbklkOiBzdHJpbmcpID0+IHtcclxuICAgICAgY29uc3QgcmVzID0gYXdhaXQgaHR0cC5nZXRPbmNlPHtcclxuICAgICAgICB0aXRsZTogc3RyaW5nO1xyXG4gICAgICB9PihgY29udmVyc2F0aW9uLyR7Y29udmVyc2F0aW9uSWR9L3Byb3Bvc2VkLXRpdGxlYCk7XHJcbiAgICAgIHJldHVybiB1cGRhdGVUaXRsZShjb252ZXJzYXRpb25JZCwgcmVzLmRhdGEudGl0bGUpO1xyXG4gICAgfSxcclxuICAgIG11dGF0ZUNvbnZlcnNhdGlvbnM6IChcclxuICAgICAgY29udmVyc2F0aW9ucz86XHJcbiAgICAgICAgfCBDb252ZXJzYXRpb25NZXRhW11cclxuICAgICAgICB8IFByb21pc2U8Q29udmVyc2F0aW9uTWV0YVtdPlxyXG4gICAgICAgIHwgTXV0YXRvckNhbGxiYWNrPENvbnZlcnNhdGlvbk1ldGFbXT4sXHJcbiAgICAgIG9wdGlvbnM/OiBQYXJhbWV0ZXJzPHR5cGVvZiBtdXRhdGU+WzJdXHJcbiAgICApID0+IHtcclxuICAgICAgcmV0dXJuIG11dGF0ZSgnY29udmVyc2F0aW9ucycsIGNvbnZlcnNhdGlvbnMsIG9wdGlvbnMpO1xyXG4gICAgfSxcclxuICB9O1xyXG59O1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgdXNlQ29udmVyc2F0aW9uQXBpO1xyXG4iXSwibWFwcGluZ3MiOiJBQUFBLFNBQTBCLG9CQUFvQjtBQVM5QyxPQUFPLGFBQWE7QUFFcEIsTUFBTSxxQkFBcUIsTUFBTTtBQUMvQixRQUFNLE9BQU8sUUFBUTtBQUNyQixRQUFNLEVBQUUsT0FBTyxJQUFJLGFBQWE7QUFFaEMsUUFBTSxjQUFjLENBQUMsZ0JBQXdCLFVBQWtCO0FBQzdELFdBQU8sS0FBSyxNQUFNLGdCQUFnQixjQUFjLFVBQVU7QUFBQSxNQUN4RCxVQUFVO0FBQUEsSUFDWixDQUFDO0FBQUEsRUFDSDtBQUVBLFNBQU87QUFBQSxJQUNMLGtCQUFrQixNQUFNO0FBQ3RCLGFBQU8sS0FBSyxJQUF3QixpQkFBaUI7QUFBQSxRQUNuRCxrQkFBa0I7QUFBQSxNQUNwQixDQUFDO0FBQUEsSUFDSDtBQUFBLElBQ0EsaUJBQWlCLENBQUMsbUJBQTRCO0FBQzVDLGFBQU8sS0FBSztBQUFBLFFBQ1YsQ0FBQyxpQkFBaUIsT0FBTyxnQkFBZ0IsY0FBYztBQUFBLFFBQ3ZEO0FBQUEsVUFDRSxrQkFBa0I7QUFBQSxRQUNwQjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxhQUFhLENBQUMsVUFBOEI7QUFDMUMsYUFBTyxLQUFLLEtBQTBCLGdCQUFnQjtBQUFBLFFBQ3BELEdBQUc7QUFBQSxNQUNMLENBQUM7QUFBQSxJQUNIO0FBQUEsSUFDQSxxQkFBcUIsQ0FBQyxVQUFzQztBQUMxRCxhQUFPLEtBQUs7QUFBQSxRQUNWO0FBQUEsUUFDQTtBQUFBLFVBQ0UsR0FBRztBQUFBLFFBQ0w7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0Esb0JBQW9CLENBQUMsbUJBQTJCO0FBQzlDLGFBQU8sS0FBSyxPQUFPLGdCQUFnQixjQUFjLEVBQUU7QUFBQSxJQUNyRDtBQUFBLElBQ0Esb0JBQW9CLE1BQU07QUFDeEIsYUFBTyxLQUFLLE9BQU8sZUFBZTtBQUFBLElBQ3BDO0FBQUEsSUFDQTtBQUFBLElBQ0EsK0JBQStCLE9BQU8sbUJBQTJCO0FBQy9ELFlBQU0sTUFBTSxNQUFNLEtBQUssUUFFcEIsZ0JBQWdCLGNBQWMsaUJBQWlCO0FBQ2xELGFBQU8sWUFBWSxnQkFBZ0IsSUFBSSxLQUFLLEtBQUs7QUFBQSxJQUNuRDtBQUFBLElBQ0EscUJBQXFCLENBQ25CLGVBSUEsWUFDRztBQUNILGFBQU8sT0FBTyxpQkFBaUIsZUFBZSxPQUFPO0FBQUEsSUFDdkQ7QUFBQSxFQUNGO0FBQ0Y7QUFFQSxlQUFlOyIsIm5hbWVzIjpbXX0=

It's worth pointing out that I haven't loaded up the backend for local development, only the frontend to make some changes. Before this update the frontend would start and load the UI, even without conversations.

[Yukinobu-Mine]

@axelpina Sorry, what I wanted to see was the response to a GET request to the following backend API:

GET https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/conversations

[axelpina]

Here's a response from the GET in https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/conversations:

NOTE: This is from the production environment. I have not configured the backend for local development. The only thing that I've done locally is make changes to the frontend. And again, the frontend spun up normally without issues before https://github.com/aws-samples/bedrock-claude-chat/commit/bec3aee4e63e5137a17ea5ed97b7ac5d38e4d3b1

[axelpina]

@statefb I apologize for diverting this ticket, but I wanted to avoid opening a new one as my question is specific to starting the backend for development and testing. After exporting the required environment variables, the backend starts without issue. However, when I start the frontend, I am unable to access Claude. Additionally I am unable to visualize my bots as well.

# export TABLE_NAME=BedrockChatStack-DatabaseConversationTablexxxxxx
# export ACCOUNT=xxxxx
# export REGION=us-east-1
# export BEDROCK_REGION=us-east-1
# export DOCUMENT_BUCKET=bedrockchatstack-documentbucketxxxxx
# export LARGE_MESSAGE_BUCKET=bedrockchatstack-largemessagebucketxxxxx
# export USER_POOL_ID=us-east-1_xxxxx
# export CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxx

Need clarification on using the backend for local development.

Thank you in advance.

[github-actions[bot]]

This issue has been labeled as "stale" due to no response by the reporter within 1 month (and 14 days after last commented by someone). And it will be closed automatically 14 days later if not responded.