Using react-aws-s3 and it gives TypeError: Cannot read properties of undefined (reading 'split') Error

Question

I am using react-aws-s3 npm package to upload images to my s3 bucket, but it is giving me following error while clicking on upload to s3 button.

TypeError: Cannot read properties of undefined (reading 'split') Error

Code:

const config = {
bucketName: S3_BUCKET,
dirName: 'media',
rregion: REGION,
accessKeyId: ACCESS_KEY,
secretAccessKey: SECRET_ACCESS_KEY
}

const [selectedFile, setSelectedFile] = useState(null);
const [uploadedFile, setUploadedFile] = useState(null);
const handleFileInput = (e) => {
  setSelectedFile(URL.createObjectURL(e.target.files[0]));
  setUploadedFile(e.target.files[0])
}

const handleUpload = async (file) => {
  const ReactS3Client = new S3(config);
  ReactS3Client
      .uploadFile(file, "MyImage")
      .then(data => console.log(data))
      .catch(err => console.error(err))
}


return <>
    <div>
        <div>React S3 File Upload</div>
        <input type="file" onChange={handleFileInput}/>
        <button onClick={() => handleUpload(uploadedFile)}> Upload to S3</button>
        <div>
          <img src={selectedFile} width={200}/>
        </div>
    </div>
  </>;

Answer 1

In your config, "region" is mistyped as "rregion". You can update it to "region" and try again.