React javascript "Error: Credential is missing" when connecting to DynamoDBClient

Question

I'm trying to connect to my dynamoDB table from inside a React js app. I have AWS credentials set up locally. When I run my app, I get the following error on Chrome Devtools: "Error: Credential is missing".

Oddly, if I run the AWS example found below using pretty much the same code via node on terminal, it works fine. https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/dynamodb/src/partiQL_examples/src/partiql_getItem.js

To run the AWS example, I created a new mjs file inside my react SRC folder, so it should have all the same access as the React app, right? No credentials are explicitly added in the mjs file or the react app.

Why doesn't the React environment have access to the credentials? I've tried both ~/.aws/credentials and environment variables. The AWS SDK seems to say that it should just work for Node. Any thoughts?

import { DynamoDBClient, ExecuteStatementCommand} from '@aws-sdk/client-dynamodb';


function App() {  
  const dynamoDB = new DynamoDBClient({ region : "us-west-2"});

  async function loadFromCloud () {    
    const command = new ExecuteStatementCommand({
      Statement: `select * from TableX`
    });
    try {
      const data = await dynamoDB.send(command);
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  }

Answer 1

Make sure that you have AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY specified as environment variables and that you also specify AWS_SDK_LOAD_CONFIG=1

However, your React app is run in the browser. It should only work in a node.js app.