Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AWSS3Provider - get signed url error [TypeError: Cannot read property 'byteLength' of undefined] #10405

Closed
3 tasks done
Qruiser opened this issue Oct 2, 2022 · 17 comments
Closed
3 tasks done
Assignees
Labels
bug Something isn't working React Native React Native related issue RN - New Architecture Related to React Native's new architecture composed by Fabric or Turbo Module Storage Related to Storage components/category

Comments

@Qruiser
Copy link

Qruiser commented Oct 2, 2022

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Authentication, Analytics, GraphQL API, Storage, Push Notifications

Amplify Categories

No response

Environment information

# Put output below this line


  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 192.38 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /opt/homebrew/bin/yarn
    npm: 8.6.0 - /opt/homebrew/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    @aws-amplify/datastore-storage-adapter: ^1.3.4 => 1.3.4 
    @aws-amplify/pushnotification: ^4.3.25 => 4.3.25 
    @babel/core: ^7.12.9 => 7.18.6 
    @babel/runtime: ^7.12.5 => 7.18.6 
    @react-aria/ssr: ^3.2.0 => 3.2.0 
    @react-native-async-storage/async-storage: ^1.17.7 => 1.17.7 
    @react-native-community/eslint-config: ^2.0.0 => 2.0.0 
    @react-native-community/netinfo: ^9.3.0 => 9.3.0 
    @react-native-community/push-notification-ios: ^1.10.1 => 1.10.1 (1.0.3)
    @react-native-picker/picker: ^2.4.2 => 2.4.2 
    @react-navigation/bottom-tabs: ^6.3.2 => 6.3.3 
    @react-navigation/native: ^6.0.10 => 6.0.10 
    @react-navigation/native-stack: ^6.6.2 => 6.6.2 
    HelloWorld:  0.0.1 
    amazon-cognito-identity-js: ^5.2.9 => 5.2.10 
    aws-amplify: ^4.3.28 => 4.3.28 
    aws-amplify-react-native: ^6.0.5 => 6.0.5 
    babel-jest: ^26.6.3 => 26.6.3 
    babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 
    eslint: ^7.32.0 => 7.32.0 
    hermes-inspector-msggen:  1.0.0 
    jest: ^26.6.3 => 26.6.3 
    metro-react-native-babel-preset: ^0.70.3 => 0.70.3 
    moment: ^2.29.3 => 2.29.4 
    native-base: ^3.4.7 => 3.4.7 
    react: 18.0.0 => 18.0.0 
    react-bootstrap: ^2.4.0 => 2.4.0 
    react-bootstrap/AbstractModalHeader:  undefined ()
    react-bootstrap/Accordion:  undefined ()
    react-bootstrap/AccordionBody:  undefined ()
    react-bootstrap/AccordionButton:  undefined ()
    react-bootstrap/AccordionCollapse:  undefined ()
    react-bootstrap/AccordionContext:  undefined ()
    react-bootstrap/AccordionHeader:  undefined ()
    react-bootstrap/AccordionItem:  undefined ()
    react-bootstrap/AccordionItemContext:  undefined ()
    react-bootstrap/Alert:  undefined ()
    react-bootstrap/Anchor:  undefined ()
    react-bootstrap/Badge:  undefined ()
    react-bootstrap/BootstrapModalManager:  undefined ()
    react-bootstrap/Breadcrumb:  undefined ()
    react-bootstrap/BreadcrumbItem:  undefined ()
    react-bootstrap/Button:  undefined ()
    react-bootstrap/ButtonGroup:  undefined ()
    react-bootstrap/ButtonToolbar:  undefined ()
    react-bootstrap/Card:  undefined ()
    react-bootstrap/CardGroup:  undefined ()
    react-bootstrap/CardHeader:  undefined ()
    react-bootstrap/CardHeaderContext:  undefined ()
    react-bootstrap/CardImg:  undefined ()
    react-bootstrap/Carousel:  undefined ()
    react-bootstrap/CarouselCaption:  undefined ()
    react-bootstrap/CarouselItem:  undefined ()
    react-bootstrap/CloseButton:  undefined ()
    react-bootstrap/Col:  undefined ()
    react-bootstrap/Collapse:  undefined ()
    react-bootstrap/Container:  undefined ()
    react-bootstrap/Dropdown:  undefined ()
    react-bootstrap/DropdownButton:  undefined ()
    react-bootstrap/DropdownContext:  undefined ()
    react-bootstrap/DropdownItem:  undefined ()
    react-bootstrap/DropdownMenu:  undefined ()
    react-bootstrap/DropdownToggle:  undefined ()
    react-bootstrap/ElementChildren:  undefined ()
    react-bootstrap/Fade:  undefined ()
    react-bootstrap/Feedback:  undefined ()
    react-bootstrap/Figure:  undefined ()
    react-bootstrap/FigureCaption:  undefined ()
    react-bootstrap/FigureImage:  undefined ()
    react-bootstrap/FloatingLabel:  undefined ()
    react-bootstrap/Form:  undefined ()
    react-bootstrap/FormCheck:  undefined ()
    react-bootstrap/FormCheckInput:  undefined ()
    react-bootstrap/FormCheckLabel:  undefined ()
    react-bootstrap/FormContext:  undefined ()
    react-bootstrap/FormControl:  undefined ()
    react-bootstrap/FormFloating:  undefined ()
    react-bootstrap/FormGroup:  undefined ()
    react-bootstrap/FormLabel:  undefined ()
    react-bootstrap/FormRange:  undefined ()
    react-bootstrap/FormSelect:  undefined ()
    react-bootstrap/FormText:  undefined ()
    react-bootstrap/Image:  undefined ()
    react-bootstrap/InputGroup:  undefined ()
    react-bootstrap/InputGroupContext:  undefined ()
    react-bootstrap/ListGroup:  undefined ()
    react-bootstrap/ListGroupItem:  undefined ()
    react-bootstrap/Modal:  undefined ()
    react-bootstrap/ModalBody:  undefined ()
    react-bootstrap/ModalContext:  undefined ()
    react-bootstrap/ModalDialog:  undefined ()
    react-bootstrap/ModalFooter:  undefined ()
    react-bootstrap/ModalHeader:  undefined ()
    react-bootstrap/ModalTitle:  undefined ()
    react-bootstrap/Nav:  undefined ()
    react-bootstrap/NavContext:  undefined ()
    react-bootstrap/NavDropdown:  undefined ()
    react-bootstrap/NavItem:  undefined ()
    react-bootstrap/NavLink:  undefined ()
    react-bootstrap/Navbar:  undefined ()
    react-bootstrap/NavbarBrand:  undefined ()
    react-bootstrap/NavbarCollapse:  undefined ()
    react-bootstrap/NavbarContext:  undefined ()
    react-bootstrap/NavbarOffcanvas:  undefined ()
    react-bootstrap/NavbarToggle:  undefined ()
    react-bootstrap/Offcanvas:  undefined ()
    react-bootstrap/OffcanvasBody:  undefined ()
    react-bootstrap/OffcanvasHeader:  undefined ()
    react-bootstrap/OffcanvasTitle:  undefined ()
    react-bootstrap/OffcanvasToggling:  undefined ()
    react-bootstrap/Overlay:  undefined ()
    react-bootstrap/OverlayTrigger:  undefined ()
    react-bootstrap/PageItem:  undefined ()
    react-bootstrap/Pagination:  undefined ()
    react-bootstrap/Placeholder:  undefined ()
    react-bootstrap/PlaceholderButton:  undefined ()
    react-bootstrap/Popover:  undefined ()
    react-bootstrap/PopoverBody:  undefined ()
    react-bootstrap/PopoverHeader:  undefined ()
    react-bootstrap/ProgressBar:  undefined ()
    react-bootstrap/Ratio:  undefined ()
    react-bootstrap/Row:  undefined ()
    react-bootstrap/SSRProvider:  undefined ()
    react-bootstrap/Spinner:  undefined ()
    react-bootstrap/SplitButton:  undefined ()
    react-bootstrap/Stack:  undefined ()
    react-bootstrap/Switch:  undefined ()
    react-bootstrap/Tab:  undefined ()
    react-bootstrap/TabContainer:  undefined ()
    react-bootstrap/TabContent:  undefined ()
    react-bootstrap/TabPane:  undefined ()
    react-bootstrap/Table:  undefined ()
    react-bootstrap/Tabs:  undefined ()
    react-bootstrap/ThemeProvider:  undefined ()
    react-bootstrap/Toast:  undefined ()
    react-bootstrap/ToastBody:  undefined ()
    react-bootstrap/ToastContainer:  undefined ()
    react-bootstrap/ToastContext:  undefined ()
    react-bootstrap/ToastFade:  undefined ()
    react-bootstrap/ToastHeader:  undefined ()
    react-bootstrap/ToggleButton:  undefined ()
    react-bootstrap/ToggleButtonGroup:  undefined ()
    react-bootstrap/Tooltip:  undefined ()
    react-bootstrap/TransitionWrapper:  undefined ()
    react-bootstrap/createChainedFunction:  undefined ()
    react-bootstrap/createUtilityClasses:  undefined ()
    react-bootstrap/createWithBsPrefix:  undefined ()
    react-bootstrap/divWithClassName:  undefined ()
    react-bootstrap/getTabTransitionComponent:  undefined ()
    react-bootstrap/helpers:  undefined ()
    react-bootstrap/safeFindDOMNode:  undefined ()
    react-bootstrap/transitionEndListener:  undefined ()
    react-bootstrap/triggerBrowserReflow:  undefined ()
    react-bootstrap/types:  undefined ()
    react-bootstrap/useOverlayOffset:  undefined ()
    react-bootstrap/usePlaceholder:  undefined ()
    react-bootstrap/useWrappedRefWithWarning:  undefined ()
    react-moment: ^1.1.2 => 1.1.2 
    react-native: 0.69.0 => 0.69.0 
    react-native-autolink: ^4.0.0 => 4.0.0 
    react-native-device-info: ^10.0.2 => 10.0.2 (0.9.9, 8.7.1)
    react-native-fast-image: ^8.6.1 => 8.6.1 
    react-native-image-crop-picker: ^0.38.0 => 0.38.0 
    react-native-image-picker: ^4.10.0 => 4.10.0 
    react-native-popover-view: ^5.1.2 => 5.1.2 
    react-native-popup-menu: ^0.16.0 => 0.16.1 
    react-native-safe-area-context: ^4.3.1 => 4.3.1 
    react-native-screens: ^3.14.0 => 3.14.0 
    react-native-sqlite-storage: ^6.0.1 => 6.0.1 
    react-native-svg: ^12.3.0 => 12.3.0 
    react-native-svg-transformer: ^1.0.0 => 1.0.0 
    react-native-user-avatar: ^1.0.8 => 1.0.8 
    react-test-renderer: 18.0.0 => 18.0.0 
    sp-react-native-in-app-updates: ^1.1.7 => 1.1.7 
  npmGlobalPackages:
    @aws-amplify/cli: 9.0.0
    corepack: 0.10.0
    npm: 8.6.0

Describe the bug

I am trying to get Storage.get in IOS Devices. This works on Android devices.

await Storage.get(Res)
  .then(res => {
    console.log('get', res);
    setImageurl(res);
  })
  .catch(error => {
    console.log(error);
  });

I get the following error:

WARN [WARN] 53:15.437 AWSS3Provider - get signed url error [TypeError: Cannot read property 'byteLength' of undefined]

Expected behavior

Should return a pre-signed URL.

Reproduction steps

Just try and do a storage.get on a key in IOS.

Code Snippet

// Put your code below this line.
import {Storage, Auth} from 'aws-amplify';



  async function getImage() {
    await Storage.get(Res)
      .then(res => {
        console.log('get', res);
        setImageMessageurl(res);
      })
      .catch(error => {
        console.log(error);
      });
  }

Log output

// Put your logs below this line
 LOG  [DEBUG] 22:12.718 Credentials - getting credentials
 LOG  [DEBUG] 22:12.718 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.718 Credentials - getting new cred promise
 LOG  [DEBUG] 22:12.718 Credentials - checking if credentials exists and not expired
 LOG  [DEBUG] 22:12.719 Credentials - need to get a new credential or refresh the existing one
 LOG  [DEBUG] 22:12.719 Credentials - no credentials for expiration check
 LOG  [DEBUG] 22:12.719 AuthClass - Getting current user credentials
 LOG  [DEBUG] 22:12.720 Credentials - getting credentials
 LOG  [DEBUG] 22:12.720 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.720 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.721 Credentials - getting credentials
 LOG  [DEBUG] 22:12.721 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.721 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.721 Credentials - getting credentials
 LOG  [DEBUG] 22:12.722 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.722 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.722 Credentials - getting credentials
 LOG  [DEBUG] 22:12.722 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.723 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.723 AuthClass - failed to get or parse item aws-amplify-federatedInfo [SyntaxError: JSON Parse error: Unexpected token: u]
 LOG  [DEBUG] 22:12.724 AuthClass - Getting current session
 LOG  [DEBUG] 22:12.727 AuthClass - Getting the session from this user: XXXXXXXXXXXXXXXXXXX
 LOG  [DEBUG] 22:12.738 Credentials - set credentials from session
 LOG  [DEBUG] 22:12.739 AWSPinpointProvider - updateEndpoint error [TypeError: Cannot read property 'byteLength' of undefined]
 ERROR  [ERROR] 22:12.740 AWSPinpointProvider - updateEndpoint failed [TypeError: Cannot read property 'byteLength' of undefined]
 LOG  [DEBUG] 22:12.742 AnalyticsClass - Failed to update the endpoint [TypeError: Cannot read property 'byteLength' of undefined]
 LOG  [DEBUG] 22:12.998 Credentials - Failed to load credentials {"_h": 1, "_i": 3, "_j": {"_h": 0, "_i": 2, "_j": [TypeError: undefined is not a function], "_k": null, "_o": 3}, "_k": null}
 LOG  [DEBUG] 22:12.999 Credentials - Error loading credentials [TypeError: undefined is not a function]
 LOG  [DEBUG] 22:13.0 AuthClass - getting guest credentials
 LOG  [DEBUG] 22:13.1 Credentials - setting credentials for guest
 LOG  [DEBUG] 22:13.648 Credentials - Failed to load credentials {"_h": 1, "_i": 3, "_j": {"_h": 0, "_i": 2, "_j": [TypeError: undefined is not a function], "_k": null, "_o": 4}, "_k": null}
 LOG  [DEBUG] 22:13.649 Credentials - Error loading credentials [TypeError: undefined is not a function]
 LOG  [DEBUG] 22:13.650 S3ClientUtils - credentials provider get credentials {"accessKeyId": undefined, "authenticated": undefined, "identityId": undefined, "secretAccessKey": undefined, "sessionToken": undefined}

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
"aws_project_region": "us-east-1",
"aws_cognito_identity_pool_id": "us-east-1:c3199a44-83da-4ec3-91a6-3f17fa52c7be",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_3jP8B4fd3",
"aws_user_pools_web_client_id": "39h0kmgv6272ob133sebskl55p",
"oauth": {},
"aws_cognito_username_attributes": [
"EMAIL"
],
"aws_cognito_social_providers": [],
"aws_cognito_signup_attributes": [
"EMAIL"
],
"aws_cognito_mfa_configuration": "OFF",
"aws_cognito_mfa_types": [
"SMS"
],
"aws_cognito_password_protection_settings": {
"passwordPolicyMinLength": 8,
"passwordPolicyCharacters": []
},
"aws_cognito_verification_mechanisms": [
"EMAIL"
],
"aws_appsync_graphqlEndpoint": "https://uqzlz4lhqzchval73nuv3mcfhi.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
"aws_appsync_apiKey": "da2-XXXXXXXXXXXX",
"aws_mobile_analytics_app_id": "XXXXXXXXXXXXX",
"aws_mobile_analytics_app_region": "us-east-1",
"aws_user_files_s3_bucket": "qapp-develop195252-develop",
"aws_user_files_s3_bucket_region": "us-east-1"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

@Qruiser
Copy link
Author

Qruiser commented Oct 2, 2022

This call is also failing: await Auth.currentCredentials() .. returns undefined even though... await Auth.currentAuthenticatedUser() is returning the data.

@Qruiser
Copy link
Author

Qruiser commented Oct 3, 2022

I explored this further ...

const identityPoolId = awsconfig.aws_cognito_identity_pool_id;
const key = 'cognito-idp.' + region + '.amazonaws.com/' + userPoolId;
const logins = {};
logins[key] = idToken;
const client = new CognitoIdentityClient({region: region});
const {IdentityId} = await client
.send(
new GetIdCommand({
IdentityPoolId: identityPoolId,
Logins: logins,
}),
)
.then(res => {
console.log(res.IdentityId);
})
.catch(error => {
console.log('WTF', error);
});

5:06
on Android: us-east-1:7632617d-e8f1-4946-b5aa-XXXXXX
5:07
On IOS: LOG WTF [TypeError: undefined is not a function]

@nadetastic nadetastic added Auth Related to Auth components/category React Native React Native related issue Storage Related to Storage components/category pending-triage Issue is pending triage and removed Auth Related to Auth components/category labels Oct 3, 2022
@tannerabread tannerabread self-assigned this Oct 3, 2022
@tannerabread
Copy link
Contributor

@Qruiser
How are you uploading the files?
How did you configure your Authentication?

Can you send the contents of guestAccess and authAccess from the amplify -> backend -> storage -> <bucket_name> -> cli-inputs.json

@killyvera
Copy link

killyvera commented Oct 3, 2022

i was working correctly with my app an dashboard cognito admin panel, but suddenly appears the same issue when i try to upload or get image file from s3 bucket to my avatar profile users, imported s3 storage, with default settings to log users.

@Qruiser
Copy link
Author

Qruiser commented Oct 4, 2022

@Qruiser How are you uploading the files? How did you configure your Authentication?

Can you send the contents of guestAccess and authAccess from the amplify -> backend -> storage -> <bucket_name> -> cli-inputs.json

This is my cli-inputs.json

{
"resourceName": "develop",
"policyUUID": "4c496b50",
"bucketName": "develop",
"storageAccess": "authAndGuest",
"guestAccess": [
"READ"
],
"authAccess": [
"CREATE_AND_UPDATE",
"READ",
"DELETE"
],
"triggerFunction": "NONE",
"groupAccess": {}
}

FYI , I further investigated the issue and did the following experiment...

const identityPoolId = awsconfig.aws_cognito_identity_pool_id;
const key = 'cognito-idp.' + region + '.amazonaws.com/' + userPoolId;
const logins = {};
logins[key] = idToken;
const client = new CognitoIdentityClient({region: region});
const {IdentityId} = await client
.send(
new GetIdCommand({
IdentityPoolId: identityPoolId,
Logins: logins,
}),
)
.then(res => {
console.log(res.IdentityId);
})
.catch(error => {
console.log('WTF', error);
});

with this output:

on Android: us-east-1:7632617d-e8f1-4946-b5aa-XXXXXX
on IOS: LOG WTF [TypeError: undefined is not a function]

@tannerabread
Copy link
Contributor

@Qruiser
So far I have been unable to reproduce this on my end. A Storage.get call from iOS works for me

I noticed that your code looks like you are using the SDK. Are you using the SDK for Auth instead of Amplify Auth?

@Qruiser
Copy link
Author

Qruiser commented Oct 4, 2022

I am using Amplify Auth. I have been able to reproduce it on a plain vanilla react-native 0.70 project using Fabric and Hermes. The GetIdCommand on vanilla React native 0.70 works without Fabric option. I think there is something going wrong here. Maybe too early to try this with aws-amplify.

@MensurRasic
Copy link

Same issue here, it's working on my amplify environment dev but not on staging... and I don't see and difference between both environments...

@chrisbonifacio
Copy link
Member

chrisbonifacio commented Oct 4, 2022

I am using Amplify Auth. I have been able to reproduce it on a plain vanilla react-native 0.70 project using Fabric and Hermes. The GetIdCommand on vanilla React native 0.70 works without Fabric option. I think there is something going wrong here. Maybe too early to try this with aws-amplify.

If you can create and share a repo that reproduces the issue please share it with @tannerabread. We need to be able to reproduce the issue to figure out why it's happening. This exact error has come up for several different customers for different reasons so it's hard to tell without a close copy of your amplify configuration and logic.

The easiest way to "force" this error is trying to put/get files as a guest (IAM) user without having allowed guest access and/or enabled unauthenticated logins. But if it's working in one platform or environment and not another, it's probably not that straightforward.

@tannerabread
Copy link
Contributor

@Qruiser I was able to reproduce this with Fabric enabled. Currently talking to the team to figure out next steps and will update this issue.

@MensurRasic did you have Fabric enabled in your project?

@tannerabread
Copy link
Contributor

Labeling this as a bug with Fabric. This should be supported and will be looked into by the team.

@tannerabread tannerabread added bug Something isn't working and removed pending-triage Issue is pending triage labels Oct 6, 2022
@cwomack cwomack added the RN - New Architecture Related to React Native's new architecture composed by Fabric or Turbo Module label Oct 11, 2022
@cshfang
Copy link
Member

cshfang commented Oct 21, 2022

I was able to reproduce this issue, and as @Qruiser pointed out, this issue does seem to be isolated to iOS with the new architecture enabled. I dug into this and, unfortunately, I think the fix may have to come from React Native - I will try to open an issue there to learn more. In the meantime, my findings:

  1. Amplify relies pretty heavily on Credentials - Storage is no exception
  2. Under the hood, we are communicating with Cognito via the AWS SDK for JavaScript v3
  3. More specifically, and as @Qruiser pointed out, the @aws-sdk/client-cognito-identity package provides us with the APIs needed for resolving credentials.
  4. To facilitate the actual network request on non-node environments the @aws-sdk/fetch-http-handler wraps but ultimately delegates the call to the fetch API.
  5. The fetch response does come back successfully from the service but does not contain a body and thus is considered a buffered body by the handler and the blob() method is automatically invoked (link to code).
  6. Unfortunately, with the new architecture enabled on iOS, it seems the blob() method is missing from the response and, as such, when the handler attempts to invoke it, we run into undefined is not a function error.

Having root caused this, I tried to better understand why the blob() method would be missing from the response...

  1. In React Native, fetch is polyfilled via whatwg-fetch
  2. One of the first things this module does it to try and determine the environment support for various functions, including trying to instantiate a Blob.
  3. With the new architecture enabled on iOS, the new Blob() fails to instantiate, and as a result, the blob() method is not made available to the polyfilled fetch

This is where my investigation has brought me thus far. As to why the global Blob fails to construct, it seems to have something to do with React Native's NativeBlobModule as the construction error thrown can be traced back to the BlobManager

Edit: Opened issued against React Native repo here

@tannerabread
Copy link
Contributor

Update to this issue: The fix to the underlying blob issue will be released to react native v0.71 which is scheduled to come out in a few weeks. Read more in this comment.

This should allow us to verify if there is anything we need to do from the Amplify library side to resolve this error

@tannerabread
Copy link
Contributor

Hi @Qruiser, @killyvera, @MensurRasic
This should be fixed now with the recent release of React Native v0.71

I have tested it with my original app that reproduced the issue and upgraded following their upgrade helper. The issue seems to be resolved from my testing, can one of you test your own app to make sure.

@tannerabread
Copy link
Contributor

Closing this as resolved. The fix from the React Native side should be the solution for anyone running into this

@akihisa-sumi
Copy link

akihisa-sumi commented Apr 14, 2023

@tannerabread @chrisbonifacio
We have the same issue. This issue occurs when starting the React Native app normally but does not occur in debug mode. The behavior is the same on both iPhone and Android. We are using React Native 0.71.3, but this bug has occurred. Any help would be great.

package.json

"dependencies": {
    "@hookform/resolvers": "^2.9.11",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-community/netinfo": "^9.3.7",
    "@react-navigation/native": "^6.1.4",
    "@react-navigation/native-stack": "^6.9.10",
    "@types/uuid": "^9.0.1",
    "amazon-cognito-identity-js": "^6.1.2",
    "aws-amplify": "^5.0.15",
    "constate": "^3.3.2",
    "native-base": "^3.4.25",
    "react": "18.2.0",
    "react-hook-form": "^7.43.1",
    "react-native": "0.71.3",
    "react-native-inappbrowser-reborn": "^3.7.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "^3.20.0",
    "react-native-svg": "12.1.1",
    "react-query": "^3.39.3",
    "uuid": "^9.0.0",
    "zod": "^3.20.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.4.0",
    "@types/react": "^18.0.28",
    "@types/react-native": "^0.71.3",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "babel-jest": "^29.2.1",
    "eslint": "^8.38.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-native": "^4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.8.7",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },

code snippet

Amplify.configure({
  Auth: {
    identityPoolId: awsExports.aws_cognito_identity_pool_id,
    region: awsExports.aws_cognito_region,
    userPoolId: awsExports.aws_user_pools_id,
    userPoolWebClientId: awsExports.aws_user_pools_web_client_id,
  },
  oauth: {
    ...awsExports.oauth,
    urlOpener,
  },
  Storage: {
    AWSS3: {
      bucket: awsExports.aws_user_files_s3_bucket,
      region: awsExports.aws_user_files_s3_bucket_region,
    },
  },
  API: {
    aws_appsync_graphqlEndpoint: awsExports.aws_appsync_graphqlEndpoint,
    aws_appsync_region: awsExports.aws_appsync_region,
    aws_appsync_authenticationType: awsExports.aws_appsync_authenticationType,
  }
});

await Auth.signIn({
  username,
  password,
});

const currentCredentials = await Auth.currentCredentials();
console.log({currentCredentials});
const result = await Storage.get(fileName, {
  level: 'private',
});
console.log(result);

console output

LOG  Running "flik" with {"rootTag":11}
LOG  {"currentCredentials": [Error: Native module not found]}
WARN  [WARN] 26:22.503 AWSS3Provider - get signed url error [TypeError: Cannot read property 'byteLength' of undefined]
WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'byteLength' of undefined
TypeError: Cannot read property 'byteLength' of undefined
    at isEmptyData (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:105523:16)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:105214:78)
    at hmac (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:346790:16)
    at ?anon_0_ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:346761:33)
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1195:26)
    at _next (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1214:29)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1219:14)
    at tryCallTwo (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/4b1t586k/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9)
    at doResolve (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/4b1t586k/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25)
    at Promise (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/4b1t586k/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1211:25)
    at apply (native)
    at getSigningKey (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:346777:24)
    at getSigningKey (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:347069:86)
    at ?anon_0_ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:346902:155)
    at next (native)
    at asyncGeneratorStep (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1195:26)
    at _next (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:1214:29)
    at tryCallOne (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/4b1t586k/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:53:16)
    at anonymous (/root/react-native/ReactAndroid/hermes-engine/.cxx/Release/4b1t586k/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:139:27)
    at apply (native)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:26322:26)
    at _callTimer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:26241:17)
    at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:26271:17)
    at callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:26434:44)
    at __callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:2591:46)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:2403:45)
    at __guard (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:2575:15)
    at flushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:2402:21)
    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.flik&modulesOnly=false&runModule=true:2387:33)

@akihisa-sumi
Copy link

@tannerabread @chrisbonifacio
I have opened a new Issue.
#11251

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working React Native React Native related issue RN - New Architecture Related to React Native's new architecture composed by Fabric or Turbo Module Storage Related to Storage components/category
Projects
None yet
Development

No branches or pull requests

9 participants