search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.42k stars 2.12k forks source link

Storage library does not work with access point node #9430

Open lyzhang27 opened 2 years ago

lyzhang27 commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Storage

Amplify Categories

storage

Environment information

``` # Put output below this line System: OS: macOS 12.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 225.28 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.4.2 - /usr/local/bin/node Yarn: 1.22.15 - /usr/local/bin/yarn npm: 8.0.0 - /usr/local/bin/npm Browsers: Chrome: 96.0.4664.110 Firefox: 70.0.1 Safari: 15.1 npmPackages: @aws-amplify/ui-react: ^2.1.6 => 2.1.6 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @aws-sdk/client-s3: ^3.45.0 => 3.45.0 (3.6.1) @testing-library/jest-dom: ^5.11.4 => 5.16.1 @testing-library/react: ^11.1.0 => 11.2.7 @testing-library/user-event: ^12.1.10 => 12.8.3 aws-amplify: ^4.3.6 => 4.3.10 history: ^5.1.0 => 5.1.0 react: ^17.0.2 => 17.0.2 react-bootstrap: ^2.0.3 => 2.0.3 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-dom: ^17.0.2 => 17.0.2 react-router-bootstrap: ^0.25.0 => 0.25.0 react-router-dom: ^6.1.1 => 6.1.1 react-scripts: 4.0.3 => 4.0.3 reactstrap: ^9.0.1 => 9.0.1 web-vitals: ^1.0.1 => 1.1.2 npmGlobalPackages: @aws-amplify/cli: 7.6.4 bower: 1.8.8 copyfiles: 2.0.0 dargs: 7.0.0 generator-angular: 0.16.0 generator-karma: 2.0.1 grunt-cli: 1.2.0 gulp-cli: 2.0.1 gulp: 4.0.2 imagemin-cli: 3.0.0 json-server: 0.17.0 less: 2.7.2 mocha: 6.2.0 nodemon: 2.0.13 npm: 8.0.0 react-native-cli: 2.0.1 sass: 1.38.1 serverless: 2.66.1 to: 0.2.9 update: 0.7.4 yarn: 1.22.15 yo: 3.1.1 ```

Describe the bug

Storage library does not work with access point node. I reached out to the AWS support regarding the bug and they confirmed. I can see that amplify uses s3client library 3.6.1; when I used the @aws-sdk/client-s3 v.3.45.0 I was successful in calling getObject directly using the sdk. This was the error received when I used the ampilfy storage.get with the older @aws-sdk/client-s3: ​

bucketHostnameUtils.ts:91 Uncaught (in promise) Error: Expect 's3' or 's3-outposts' in ARN service component

Expected behavior

Successfully make a Storage.get() call to the access point as the bucket name in the initialization of the amplify.config.

Reproduction steps

  1. Install "aws-amplify": "^4.3.11",
  2. Initialize Storage
  3. Call Storage.get: const result = await Storage.get(tutorial.txt, { download: true }

Code Snippet

// Put your code below this line.
Amplify.configure({
  Auth: {
    identityPoolId: '<region>:4xxxxb-b7xxxxxxx46', //REQUIRED - Amazon Cognito Identity Pool ID
    region: '<region>', // REQUIRED - Amazon Cognito Region
    userPoolId: '<region>xxxxxxCxJ', //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: '7mxxxxxxs5'
  },
  Storage: {
    AWSS3: {
      bucket: 'arn:aws:s3-object-lambda:us-west-2:<accountid>:accesspoint/lambda-access-point-name', //REQUIRED -  Amazon S3 bucket name
      region: '<region>', //OPTIONAL -  Amazon service region
    }
  }
});

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

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

jamesaucode commented 2 years ago

Thanks for raising the issue. Its in our roadmap to upgrade our AWS SDK versions but there were some changes that will affect our React Native customers so we held off upgrading it atm. We will provide you with an update once we do upgrade the SDK.