[BUG] S3Client Failed to Create Bucket in Sample Codes

[XunZhan]

What is the issue?
Hi, I am following the sample code S3 Create Bucket Command for JS V3: javascriptv3/example_code/s3/src/s3_createbucket.js and I did the UI in react native based on this tutorial: https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-react-native.html

But after typing the new bucket name in the UI, I got an error to create the bucket.

How can someone reproduce this issue (if applicable)?

1. Code Snippets:
   

2. UI for creating buckets
   

3. Error Detail
   

Environment details to help us try to reproduce the issue (if applicable)

• Operating system and version: [Windows 10 | OSX Ver 11.3.1 ]
• SDK or tool name: [AWS SDK for JavaScript]
• SDK or tool version:
  

[Doug-AWS]

I've assigned this issue to our JavaScript writer to review.

[XunZhan]

I've assigned this issue to our JavaScript writer to review.

Great, thanks for your help!

[Nadesri]

I was able to reproduce, though my setup was on an Expo-managed blank project which I merged with https://github.com/awsdocs/aws-doc-sdk-examples/blob/master/javascriptv3/example_code/reactnative/App.js. I think I see the issue.

not implemented
at node_modules/react-native/Libraries/Blob/URL.js:169:10 in get__hostname
at node_modules/@aws-sdk/url-parser/dist/cjs/index.js:7:4 in parseUrl
at node_modules/@aws-sdk/config-resolver/dist/cjs/EndpointsConfig.js:38:11 in getEndPointFromRegion
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Here is node_modules/@aws-sdk/url-parser/dist/cjs/index.js:7:4:

const { hostname, pathname, port, protocol, search } = new URL(url);

Which for some reason resolves to node_modules/react-native/Libraries/Blob/URL.js:169:10 (I don't think it should -- url-parser/package.json does not list react-native as a dependency):

  get hostname() {
    throw new Error('not implemented');
  }

This is because react-native/Blob/URL.js exports a class URL (line 115: export class URL {)

I think what we actually want is https://developer.mozilla.org/en-US/docs/Web/API/URL

[Nadesri]

Just wanted to check back in. Is it possible that this has been broken since aws/aws-sdk-js-v3@99be092? I went through the history for React Native's Blob URL (https://github.com/facebook/react-native/commits/master/Libraries/Blob/URL.js) and it seems many fields have simply never been implemented. This commit sounds like it was meant to call WHATWG URL but I see it's resolving to React Native (tbh I don't fully understand the commit message, and the diff is kind of huge).

Others ran into similar issues calling React Native's Blob URL by accident: facebook/react-native#16434 (comment)

Suggested workaround appears to be calling https://github.com/charpeni/react-native-url-polyfill. I'm not sure yet if that's the better solution or to explicitly just call WHATWG URL.

[XunZhan]

Just wanted to check back in. Is it possible that this has been broken since aws/aws-sdk-js-v3@99be092? I went through the history for React Native's Blob URL (https://github.com/facebook/react-native/commits/master/Libraries/Blob/URL.js) and it seems many fields have simply never been implemented. This commit sounds like it was meant to call WHATWG URL but I see it's resolving to React Native (tbh I don't fully understand the commit message, and the diff is kind of huge).

Others ran into similar issues calling React Native's Blob URL by accident: facebook/react-native#16434 (comment)

Suggested workaround appears to be calling https://github.com/charpeni/react-native-url-polyfill. I'm not sure yet if that's the better solution or to explicitly just call WHATWG URL.

Hi Nadesri,

Many thanks to your observation on this issue. You are correct and it's the dependencies of react-native-url-polyfill that causes the problem. I have describe my solution and findings in a pull request. You can check my changes and readme added. Thank you so much!

[brmur]

@XunZhan Thanks for your work on this. I've tried your updates per #1864 , but unfortunately, I'm still getting the same error (see below). Are you using IOS or Windows?

[XunZhan]

@brmur Hmmm...that's a bit wired. Seems the not implemented error is pointing to your createBucket function. Did you do

import {  
  S3Client,  
  CreateBucketCommand,  
  DeleteBucketCommand,  
} from "@aws-sdk/client-s3";  

at top of your App.js ?
And btw, check if you have copied my createBucket() to your App.js.

[brmur]

issue resolved. merged in #1864