Amazon web services – next js AWS s3 SDK V3 TypeError: Failed To Fetch

I’m using the AWS SDK V3 in my Nextjs application to upload files to s3. I’ve previously had this working with no issue but when I changed my secret key on my user today, I am continuously getting the error: TypeError: Failed To Fetch. Here is the code from my application that is causing the error:

const appId = process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID;
const secretId = process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY;
const S3_BUCKET = process.env.NEXT_PUBLIC_BUCKET_NAME;
const REGION = process.env.NEXT_PUBLIC_REGION;

const creds = {
  accessKeyId: appId,
  secretAccessKey: secretId,
};

const client = new S3Client({
  params: { Bucket: S3_BUCKET },
  region: REGION,
  credentials: creds,
});

const handleUploadFiles = async (e) => {
    if (e.target.files[0]) {
      for (var i = 0; i < e.target.files.length; i++) {
        setDocCounter((current) => current + 1);
        const fileName = e.target.files[i].name;
        const fileType = fileName.slice(fileName.lastIndexOf(".") + 1);
        const file = e.target.files[i];
        const fileId = uuidv4() + "." + fileType;
        console.log(fileId);
        const command = new PutObjectCommand({
          // ACL: "public-read",
          Body: file,
          Bucket: S3_BUCKET,
          Key: fileId,
        });
        try {
          const response = await client.send(command);
          console.log(response);
        } catch (err) {
          console.log(err);
        }
      }
    }
    setSnackbarMessage("Invoices successfully uploaded");
    setUploadSnackbarOpen(true);
  };

I have checked my user in IAM and it has the full s3 permissions and I have verified in the AWS CLI that the user is created and has the correct access key and secret access key.

Here is the console error:

TypeError: Failed to fetch
    at FetchHttpHandler.handle (fetch-http-handler.js:56:1)
    at async eval (flexibleChecksumsResponseMiddleware.js:17:1)
    at async eval (deserializerMiddleware.js:2:24)

Any help would be greatly appreciated

UPDATE

I’ve verified the credentials and copy/pasted them into the aws configure CLI prompt. Then I ran the following CLI command and the document was successfully uploaded to the s3 bucket:

aws s3api put-object --bucket <myBucketName> --key <myKey> --body <myFilePath> --acl bucket-owner-full-control

I’m still no closer to finding the source of the issue however, there are more details in the console log now:

TypeError: Failed to fetch
    at FetchHttpHandler.handle (fetch-http-handler.js:56:1)
    at eval (PutObjectCommand.js:56:1)
    at eval (flexibleChecksumsResponseMiddleware.js:17:1)
    at eval (deserializerMiddleware.js:2:24)
    at eval (check-content-length-header.js:18:1)
    at eval (awsAuthMiddleware.js:10:1)
    at async eval (retryMiddleware.js:24:44)
    at async eval (flexibleChecksumsMiddleware.js:54:1)
    at async eval (loggerMiddleware.js:3:1)