Creating an instance of URL like: new URL('http://facebook.com') throws an exception.

[ipeychev]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.6.0
Yarn: 0.24.6
npm: 5.3.0
Watchman: 4.7.0
Xcode: Xcode 8.3 Build version 8E162
Android Studio: 2.3 AI-162.3934792

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ^0.48.4 => 0.48.4
Target Platform: iOS (10.3)

Steps to Reproduce

1. Create a ReactNative project, which uses React Native 16
2. Try to create an instance of URL in any .js file, like this:

   const url = new URL('http://facebook.com');

3. Run the project

Expected Behavior

The URL to be the native URL, this one. It was working fine in React 15, but in React 16 it was replaced with something internal. We use URL to parse URLs and extract information about the hostname, port, etc. so we need this behaviour back.

Actual Behavior

An exception is thrown: Creating BlobURL objects is not supported yet.

Reproducible Demo

https://snack.expo.io/SJUA5i7TZ

[phillbaker]

requiring the module seemed to work for me:

const url = require('url');
console.log(url.parse('https://example.com'));

[mloureiro]

@phillbaker what @ipeychev meant is the URL definition: https://developer.mozilla.org/en-US/docs/Web/API/URL
not a custom module

[Trenrod]

Reproduced with:
Environment:
OS: Windows 10
Node: 6.12.3
Yarn: Not Found
npm: 3.10.10
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3

[lxcid]

Reproduced in:

Environment:
  OS: macOS High Sierra 10.13.2
  Node: 9.2.0
  Yarn: 1.3.2
  npm: 5.5.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.2 => 0.53.2

[m-vdb]

Having the issue as well, so sad :(

Environment:
  OS: macOS Sierra 10.12.6
  Node: 6.11.2
  Yarn: Not Found
  npm: 5.3.0
  Watchman: 4.5.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.2 => 0.52.2

[mike-marcacci]

This can be worked around. Add this little piece of nastiness to your index.js:

// see https://github.com/facebook/react-native/issues/14796
import { Buffer } from "buffer";
global.Buffer = Buffer;

// see https://github.com/facebook/react-native/issues/16434
import { URL, URLSearchParams } from "whatwg-url";
global.URL = URL;
global.URLSearchParams = URLSearchParams;

[kodayashi]

Same here. This would be nice to use when parsing URLs for deep link routing.

[idotial]

i have the same problem while using web3 in websocketProvider. new URL() write in web3 source code, i can't change it. Any solution?

[tuncaulubilge]

React-native seems to replace URL with this one, to support local blob urls: https://github.com/facebook/react-native/blob/master/Libraries/Blob/URL.js

[charpeni]

👋 You should check this out: https://github.com/charpeni/react-native-url-polyfill.

[hramos]

Closing as a workaround is provided in #16434 (comment)

[Nantris]

@hramos if a polyfill existing is reason enough to close this issue then I think the React Native team should deprecate the URL module and outsource it to the community as they have with others. This weird, multi-year, limbo state of the URL module is not good...