TypeError: Failed to fetch

[siamahnaf]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

Hello, I am getting an type error when I am using this package into nextjs projects.

TypeError: Failed to fetch

Here is image of error-

In Console I am find this-

Uncaught (in promise) 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)

Here is my usage of this package-

          const params = {
            Bucket: this.config.bucketName,
            Key: key,
            Body: file,
            ACL: "public-read",
            Metadata: {
                uuid: "14365123651274",
                tag: "",
            },
            ContentType: file.type,
            ServerSideEncryption: "AES256",
        };
        const command = new PutObjectCommand(params);
        const data = await client.send(command);

What is the main problem.

SDK version number

@aws-sdk/client-s3@3.427.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

18.17.0

Reproduction Steps

const client = new S3Client({
            region: this.config.region,
            credentials: {
                accessKeyId: this.config.accessKeyId,
                secretAccessKey: this.config.secretAccessKey,
            }
        });
        const params = {
            Bucket: this.config.bucketName,
            Key: key,
            Body: file,
            ACL: "public-read",
            Metadata: {
                uuid: "14365123651274",
                tag: "",
            },
            ContentType: file.type,
            ServerSideEncryption: "AES256",
        };
        const command = new PutObjectCommand(params);
        const data = await client.send(command);

Observed Behavior

It just thawed error.

Expected Behavior

It should work perfectly!

Possible Solution

No response

Additional Information/Context

No response

[gusberinger]

Also getting this exact same error in Chrome. However, it works perfectly in Firefox.

"@aws-sdk/client-s3": "^3.427.0"

import { S3, PutObjectCommand, DeleteObjectCommand } from "@aws-sdk/client-s3"

const createS3Client = () => {
    return new S3({
        region: credentials.region,
        credentials: {
            accessKeyId: credentials.key,
            secretAccessKey: credentials.secret,
        },
    })
}


export const uploadFile = async (file: Blob, path: string) => {
    const s3 = createS3Client()
    await s3.send(
		new PutObjectCommand({
			Bucket: "bucket-name",
			Key: path,
			Body: file,
			ACL: "public-read",
		})
	)
}

Gets this error:

TypeError: Failed to fetch
    at FetchHttpHandler.handle (fetch-http-handler.js:56:13)
    at async flexibleChecksumsResponseMiddleware.js:17:20
    at async deserializerMiddleware.js:2:26

[legendsyy]

Yep i have the exact same problem, works on firefox but not on chrome or edge

[komronrakhimov]

The same error, any ideas how to resolve this kind of issue, maybe need to downgrade ?

[kdallen1]

I observed the same issue. YMMV but I was able to solve it by pinning client-s3 to version 3.231.0

[MrLucio]

Can confirm that downgrading to 3.370.0 resolved the issue for me.
Either there was a bug in the recent updates or a dependency has been updated and somehow caused some conflict.

[gusberinger]

Can also confirm that downgrading to 3.370.0 resolved it for me.

[MyThunder11]

Can also confirm that downgrading resolved my problem

[ajredniwja]

Running this in node with 3.427.0 does not give me error

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { createReadStream } from "fs";
import { lookup } from "mime-types";

const client = new S3Client({ region: 'us-west-2' });

(async() => {
    try {
        const filePath = 'path';
        const fileStream = createReadStream(filePath);
        const params = {
            Bucket: 'bucket',
            Key: 'key',
            Body: fileStream,
            ACL: "public-read",
            ContentType: lookup(filePath) || 'application/octet-stream',
            ServerSideEncryption: "AES256",
        };
        const command = new PutObjectCommand(params);
        const data = await client.send(command);
        console.log('Success:', data);
    } catch (error) {
        console.error('Error:', error);
    }
})();

Running some more test cases will post updates

[ajredniwja]

Running in browser I was able to reproduce the issue using React:

import './App.css';
import React from 'react';
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

function App() {
    const handleFileChange = async(event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = async(event) => {
            const blob = new Blob([event.target.result], { type: file.type });

            const client = new S3Client({
                region: 'us-west-2',
            });
            const params = {
                Bucket: 'bucket',
                Key: file.name,
                Body: blob,
                ContentType: file.type,
                ACL: "public-read",
                ServerSideEncryption: "AES256",
            };
            const command = new PutObjectCommand(params);

            try {
                const data = await client.send(command);
                console.log('Success:', data);
            } catch (error) {
                console.error('Error:', error);
            }
        };

        reader.readAsArrayBuffer(file);
    };

    return ( <
        div >
        <
        input type = "file"
        onChange = { handleFileChange }
        /> < /
        div >
    );
}

export default App;

error:

App.js:35 Error: TypeError: Failed to fetch
    at FetchHttpHandler.handle (fetch-http-handler.js:55:1)
    at async flexibleChecksumsResponseMiddleware.js:17:1
    at async deserializerMiddleware.js:2:1

[kuhe]

as a workaround, try setting keepalive to false in browser applications

import { FetchHttpHandler } from "@smithy/fetch-http-handler";
import { S3Client } from "@aws-sdk/client-s3";

new S3Client({
  // note: casing is "keepAlive" in SDK options. 
  // the feature is cased as "keepalive" in native fetch/Request API
  requestHandler: new FetchHttpHandler({ keepAlive: false })
});

We will likely need to patch the fetch-http-handler not to default keepalive to true.

[ajredniwja]

I can confirm using the workaround mentioned by @kuhe I dont see the error.