Amplify-js: Storage.list crash: TypeError: Cannot read property 'map' of undefined

Created on 8 Apr 2020  路  5Comments  路  Source: aws-amplify/amplify-js

Hey, I have this project using react that is not able to list items in S3 storage but is able to put.

import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

// make sure user is logged in
// ... 

const res = await Storage.list("/")
console.log(res) // Note: this is never reached

Error stack

Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
    at AWSS3Provider.<anonymous> (AWSS3Provider.ts:409)
    at step (index.ts:57)
    at Object.next (index.ts:57)
    at fulfilled (index.ts:57)
Storage bug
Source
picture marco-bor

Most helpful comment

The issue is when the list operation returns empty results. I've a PR opened to correctly handle that case. Thanks everyone for providing the necessary information to fix this.

picture Amplifiyer on 23 Apr 2020
👍5

All 5 comments

@Quix0tic, can you also post what you see in your network tab (request and response) for the list API request.

Amplifiyer picture Amplifiyer on 8 Apr 2020

I get the following response:

<?xml version="1.0" encoding="UTF-8"?>
<ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Name>[mybucket]-dev</Name><Prefix>public//</Prefix><Marker></Marker><MaxKeys>1000</MaxKeys><IsTruncated>false</IsTruncated></ListBucketResult>

I replaced the bucket name with [mybucket].

marco-bor picture marco-bor on 8 Apr 2020

I just hit the same problem

Versions

"aws-amplify": "^3.0.7",
"aws-amplify-react": "^4.1.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",

Config

import awsConfig from './aws_config'
Amplify.configure(awsConfig);
Amplify.Logger.LOG_LEVEL = 'DEBUG';

Config file

const awsConfig = {
    engine_alb_address: '<stuff>',
    aws_project_region: 'ap-southeast-2',
    aws_cognito_region: 'ap-southeast-2',
    aws_cognito_identity_pool_id: '<stuff>',
    aws_user_pools_id: '<stuff>',
    aws_user_pools_web_client_id: '<stuff>',
    aws_user_files_s3_bucket: "<bucket>",
    aws_user_files_s3_bucket_region: "ap-southeast-2",
    oauth: {}
}

API call

const data = await Storage.list('scenarios/', { level: 'private' })
console.log(data);

Request

Request URL: https://<bucket>.s3.ap-southeast-2.amazonaws.com/?prefix=private%2Fap-southeast-2%3A79e65447-5e2f-4748-b3ae-6d5296c86def%2Fscenarios%2F
Request Method: GET
Status Code: 200 OK
Remote Address: 52.95.133.162:443
Referrer Policy: no-referrer-when-downgrade

Request headers

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
authorization: AWS4-HMAC-SHA256 Credential=<creds>/20200412/ap-southeast-2/s3/aws4_request, SignedHeaders=content-type;host;x-amz-content-sha256;x-amz-date;x-amz-security-token;x-amz-user-agent, Signature=cd2908d7f3b404b4ead62cca448414ba71e1648643b94cdcc5b597939ff6cfe8
Cache-Control: no-cache
Connection: keep-alive
DNT: 1
Host: <bucket>.s3.ap-southeast-2.amazonaws.com
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/launch/locust
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
x-amz-content-sha256: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
x-amz-date: 20200412T021925Z
x-amz-security-token: <token>
x-amz-user-agent: aws-sdk-js-v3-@aws-sdk/client-s3/1.0.0-beta.3 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36 aws-amplify/3.2.2 js

Response headers

Access-Control-Allow-Methods: HEAD, GET, PUT, POST, DELETE
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: x-amz-server-side-encryption, x-amz-request-id, x-amz-id-2, ETag
Access-Control-Max-Age: 3000
Content-Type: application/xml
Date: Sun, 12 Apr 2020 02:31:01 GMT
Server: AmazonS3
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-bucket-region: ap-southeast-2
x-amz-id-2: mQdERf4gLBjPjeOAoQxYCVMtTvyubMH7oa7zSzwxApTkDef9qIFwJ9GRxXF5VlDhsT0oZrNfo0w=
x-amz-request-id: E33E977F8E620D77

Response

<?xml version="1.0" encoding="UTF-8"?>
<ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Name>[bucket]</Name><Prefix>private/ap-southeast-2:79e65447-5e2f-4748-b3ae-6d5296c86def/scenarios/</Prefix><Marker></Marker><MaxKeys>1000</MaxKeys><IsTruncated>false</IsTruncated></ListBucketResult>

Dev tools console output

[DEBUG] 31:00.150 AWSS3Provider - list scenarios/ from private/ap-southeast-2:79e65447-5e2f-4748-b3ae-6d5296c86def/scenarios/
xhr.js:126 Refused to set unsafe header "host"
setRequestHeader @ xhr.js:126
forEach @ utils.js:238
dispatchXhrRequest @ xhr.js:120
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:61
wrap @ bind.js:9
AxiosHttpHandler.handle @ axios-http-handler.ts:71
(anonymous) @ ListObjectsCommand.ts:63
(anonymous) @ deserializerMiddleware.ts:22
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ deserializerMiddleware.ts:17
(anonymous) @ middleware.ts:34
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ middleware.ts:26
(anonymous) @ defaultStrategy.ts:54
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
step @ tslib.es6.js:85
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
ExponentialBackOffStrategy.retry @ defaultStrategy.ts:46
(anonymous) @ retryMiddleware.ts:18
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ retryMiddleware.ts:16
(anonymous) @ index.ts:41
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ index.ts:28
(anonymous) @ bucketEndpointMiddleware.ts:51
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ bucketEndpointMiddleware.ts:21
(anonymous) @ index.ts:35
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ index.ts:22
(anonymous) @ index.ts:42
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ index.ts:21
(anonymous) @ middleware.ts:31
(anonymous) @ serializerMiddleware.ts:28
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
fulfilled @ tslib.es6.js:71
Promise.then (async)
step @ tslib.es6.js:73
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ serializerMiddleware.ts:18
(anonymous) @ validate-bucket-name.ts:25
step @ tslib.es6.js:100
(anonymous) @ tslib.es6.js:81
(anonymous) @ tslib.es6.js:74
__awaiter @ tslib.es6.js:70
(anonymous) @ validate-bucket-name.ts:15
Client.send @ client.ts:95
(anonymous) @ AWSS3Provider.ts:408
step @ index.ts:57
(anonymous) @ index.ts:57
fulfilled @ index.ts:57
Promise.then (async)
step @ index.ts:57
(anonymous) @ index.ts:57
push../node_modules/@aws-amplify/storage/lib-esm/providers/AWSS3Provider.js.__awaiter @ index.ts:57
AWSS3Provider.list @ AWSS3Provider.ts:385
(anonymous) @ Storage.ts:235
step @ Storage.ts:1
(anonymous) @ Storage.ts:1
(anonymous) @ Storage.ts:1
push../node_modules/@aws-amplify/storage/lib-esm/Storage.js.__awaiter @ Storage.ts:1
Storage.list @ Storage.ts:226
LaunchLocust.getLocustFiles @ LaunchLocust.js:69
componentDidMount @ LaunchLocust.js:78
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
class_1.handleAuthStateChange @ index.tsx:70
Authenticator.handleStateChange @ Authenticator.tsx:186
(anonymous) @ Authenticator.tsx:115
Promise.then (async)
Authenticator.checkUser @ Authenticator.tsx:110
Authenticator.componentDidMount @ Authenticator.tsx:98
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:24
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.js:139
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 68 more frames
react_devtools_backend.js:6 [WARN] 31:00.387 AWSS3Provider - list error TypeError: Cannot read property 'map' of undefined
    at AWSS3Provider.<anonymous> (AWSS3Provider.ts:409)
    at step (index.ts:57)
    at Object.next (index.ts:57)
    at fulfilled (index.ts:57)

The authenticated user IAM role for Cognito has permissions to the bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "execute-api:Invoke"
            ],
            "Resource": "arn:aws:execute-api:ap-southeast-2:<account>:<api>/*/*/*",
            "Effect": "Allow"
        },
        {
            "Action": [
                "s3:PutObject",
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::<bucket>/scenarios/*",
            "Effect": "Allow"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket>"
            ]
        }
    ]
}
melbit-anthonyw picture melbit-anthonyw on 12 Apr 2020

I am also getting this error

saevarb picture saevarb on 19 Apr 2020

The issue is when the list operation returns empty results. I've a PR opened to correctly handle that case. Thanks everyone for providing the necessary information to fix this.

Amplifiyer picture Amplifiyer on 23 Apr 2020
👍5
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ddemoll picture ddemoll  路  3Comments
cgarvis picture cgarvis  路  3Comments
rayhaanq picture rayhaanq  路  3Comments
romainquellec picture romainquellec  路  3Comments
DougWoodCDS picture DougWoodCDS  路  3Comments