React-native: 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:
   javascript 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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[Panthro]

not stale bot! Really annoying this issue! =\

[ck-kc]

Any updates on this??

[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

[ovy9086]

totally not stale bot :)

[andrenerd]

+1 sad :(

[benjohnson2001]

+1

[danleechina]

+1

[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;

[ricardochen]

+1

[kodayashi]

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

[heronlyj]

+1

[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?

[bryce-larson]

+1

[kharenzze]

+1

[doublex]

+1

[ghost]

+2

[itskevinsam]

+1

[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

[joelgetaction]

Any updates? This is still an issue in 0.56 ...

[filiptodoric]

Still seeing this myself, hopefully this can be fixed and not require any workarounds for something that should be straightforward.

[dzek69]

For all readers here: @mike-marcacci presented a solution, but it's a bit unsafe - it RN have own incompatible, global URL - replacing it with "your own" implementation can break things when RN will be expecting his own URL you've rewritten.

Polyfilling Buffer this way should be safe, as RN doesn't implement Buffer at all.
It's always safe to import URL each time you need it.

I don't know any good solution if external library depends on URL (some kind of global overwriting, but only for some deps would be a solution here).

I just tweaked my own personal library so I can feed it with "custom" URL class instead of using global one - just to make it compatible with RN.

[dzek69]

@kelset you've added old version tag, but the issue is still happening, just with a different message

[joelgetaction]

+1 any update?

[nicolashardy]

The

// 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;

Workaround does not work for release apk on android :(

Any other workaround ?

[L-Yeiser]

Still seeing this.
RN version "^0.58.6"

[nicolashardy]

My workaround for android release was yarn add url-parse-lax

on index.js :

var url = require('url-parse-lax');
global.URL = url;

[matthargett]

Hi! Our implementation of URL is narrow to avoid the bundle size impact of the more spec-complete implementation. Is there a library dependency you have that uses the URL constructor in this way?

If you can be more specific with what your code is trying to do, I can make a suggestion on the PR.

[satya164]

The URL to be the native URL

I just tested on iOS 12 and there doesn't seem to be a native URL global at all. How were you using it before? Did you have a polyfill?

[Asday]

Hi! Our implementation of URL is narrow to avoid the bundle size impact of the more spec-complete implementation. Is there a library dependency you have that uses the URL constructor in this way?

If you can be more specific with what your code is trying to do, I can make a suggestion on the PR.

I'm trying to parse a URL. The URL class is perfect for that. I don't see anything in the docs mentioning you've gutted URL for "bundle size" reasons.

if (new URL(url, baseURL).origin === baseURL && !headers.Authorization) {
  headers.Authorization = `Token ${token}`
}

What's _really_ cool about that is that is that it works _just_ fine in testing because jest is running in a completely different environment to what the app actually will, so I've had something in master for about a week that simply breaks immediately.

Could y'all fix this, please? The way I see it, URL, being pretty standard and built in, isn't going to change much. Likely means the first time someone downloads an app will be the last time they download URL, so bundle size be damned - that always takes ages anyway. At least let me, as a developer, opt _in_ to the butchery.

[Asday]

@satya164 Could you let me know what more information I can provide you further to my last comment?

[BettyJJ]

Sad, another basic feature missing.

[charpeni]

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

[hramos]

Closing as a workaround is provided in https://github.com/facebook/react-native/issues/16434#issuecomment-557956079