support react-native field with fallback to browser field #2208

mvayngrib · 2015-08-03T02:50:42Z

React Native is a lot more powerful an environment than the browser, so we need an alternate mapping, as specified here

An example:

{
  "browser": {
     "./lib/server": false
   },
   "react-native": {
     "dgram": "react-native-udp",
     "fs": "react-native-level-fs"
   },
   "chromeapp": {
     "dgram": "chrome-dgram",
     "fs": "level-filesystem"
   }
}

on the other hand, if "react-native" is not present in package.json, you should fall back to "browser"

other than the one (nesting) test added, the tests are unchanged, just done for both "react-native" and "browser"

(I've implemented react-native-udp and react-native-level-fs, but they obviously don't belong in the traditional "browser" field as they won't run anywhere except in React Native.)

ide · 2015-08-03T03:24:31Z

I like this approach more than anything else I've seen so far.

lightsofapollo · 2015-08-11T16:52:29Z

+1

amasad · 2015-09-08T07:30:59Z

Nice!

We're in the process of moving the packager to it's own github repo and we'll be able to accept contributions like this much faster (we can just use the Github merge button). I'm hoping we can release it some time this week, and I'll ping you so we can move this PR there. Thanks!

mvayngrib · 2015-09-08T07:48:44Z

@amasad great, see you there :)

facebook-github-bot · 2015-10-21T04:02:18Z

@mvayngrib updated the pull request.

vjeux · 2015-11-09T19:52:54Z

Awesome, @mvayngrib sorry for the huge wait. Do you mind rebasing and i'll pull it in? Thanks!

mvayngrib · 2015-11-09T20:31:23Z

@vjeux will do after Thurs, under serious time pressure till then. If it's urgent, I can add u as a collaborator on my fork.

vjeux · 2015-11-09T21:57:40Z

Not urgent at all, it waited for a long time, can wait a bit more :)

On Nov 9, 2015, at 12:31 PM, Mark Vayngrib [email protected] wrote:

@vjeux will do after Thurs, under serious time pressure till then. If it's urgent, I can add u as a collaborator on my fork.

—
Reply to this email directly or view it on GitHub.

chetstone · 2015-11-11T18:36:16Z

This looks like a great fix, but I have a couple of questions. First, packager appears to support building web apps. I haven't used it for that and don't know if anyone else does, but if building for web, will it pick up the browser field instead of the react-native field from the package?

Second, I wonder what folks who use webpack for building react-native will have to do to make use of this field? Perhaps there's a webpack config option? or maybe webpack will have to be modified...
(Just checked: webpack has a resolve.packageMains option that should do the job.)

facebook-github-bot · 2015-11-14T19:34:18Z

@mvayngrib updated the pull request.

ide · 2015-11-15T04:42:08Z

packager/react-packager/src/DependencyResolver/Package.js

@@ -90,4 +91,8 @@ class Package {
  }
 }

+function getReplacements (pkg) {


Nit: remove space between fn name and open paren.

May want to do a more robust check below that looks whether pkg[react-native] == null so that it returns empty strings when specified

mvayngrib · 2015-11-15T10:24:03Z

packager/react-packager/src/DependencyResolver/Package.js

@@ -90,4 +91,10 @@ class Package {
  }
 }

+function getReplacements(pkg) {
+  return pkg['react-native'] == null


any plans to support excludes? (like "./lib/blah.js": false)

If Browserify supports it and it's not too hard to add, we could support it eventually, if the need arises.

yea, with browserify it's pretty much a staple

facebook-github-bot · 2015-11-15T10:24:12Z

@mvayngrib updated the pull request.

ide · 2015-11-24T17:14:39Z

@vjeux can you or @martinbigio import this then?

almeynman · 2015-11-24T17:18:28Z

Finally :)

vjeux · 2015-11-24T17:49:46Z

@facebook-github-bot shipit

facebook-github-bot · 2015-11-24T17:51:40Z

Thanks for importing. If you are an FB employee go to https://our.intern.facebook.com/intern/opensource/github/pull_request/842517002521880/int_phab to review.

Summary: React Native is a lot more powerful an environment than the browser, so we need an alternate mapping, as specified [here](https://github.com/defunctzombie/node-browser-resolve#browser-field) An example: ```js { "browser": { "./lib/server": false }, "react-native": { "dgram": "react-native-udp", "fs": "react-native-level-fs" }, "chromeapp": { "dgram": "chrome-dgram", "fs": "level-filesystem" } } ``` on the other hand, if "react-native" is not present in package.json, you should fall back to "browser" other than the one (nesting) test added, the tests are unchanged, just done for both "react-native" and "browser" (I've implemented [react-native-udp](https://npmjs.org/package/react-native-udp) and [react-native-level-fs](https://npmjs.org/package/react-native-level-fs), but they obviously don't belong in the traditional "browser" field as they won't run anywhere except in React Native.) Closes facebook#2208 Reviewed By: svcscm Differential Revision: D2691236 Pulled By: vjeux fb-gh-sync-id: 34041ed50bda4ec07f31d1dc50dcdfa428af2512

vespakoen · 2016-02-23T16:46:30Z

Hey! Thanks a lot for this, I noticed a couple of things that are lacking in this implemenation.

main checks do not include './' + main, here is my quick fix:

      if (replacements && typeof replacements === 'object') {
        main = replacements['./' + main] ||
          replacements['./' + main + '.js'] ||
          replacements['./' + main + '.json'] ||
          replacements['./' + main.replace(/(\.js|\.json)$/, '')] ||
          replacements[main] ||
          replacements[main + '.js'] ||
          replacements[main + '.json'] ||
          replacements[main.replace(/(\.js|\.json)$/, '')] ||
          main;

The "browserify" field is not considered, here is my quick fix:

function getReplacements(pkg) {
  return pkg['react-native'] == null
    ? (pkg.browser == null ? pkg.browserify : pkg.browser)
    : pkg['react-native'];
}

skevy · 2016-02-26T18:12:46Z

@vespakoen if you'd like to submit a PR to fix this stuff, that would be great!

vespakoen · 2016-02-27T17:36:40Z

Unfortunately I found my laptop on the floor this morning and my display is bricked, will get some monitor on monday and make a PR - written on my android

blackxored · 2016-07-20T05:43:45Z

What happened to this?

chetstone · 2016-07-20T17:45:59Z

The PR was accepted and merged into RN 0.17 I believe

On Tue, Jul 19, 2016 at 23:45 Adrian Perez [email protected] wrote:

What happened to this?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#2208 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA7l1yZDK2oZQ8PIk9aB-ygpCUKXQt_-ks5qXbXvgaJpZM4FkT9B
.

blackxored · 2016-07-20T19:23:42Z

Did it? I must have looked in the wrong place, as in JavaScriptEngine
something. Thanks.

Best Regards,

Adrian Perez
https://adrianperez.codes

On July 20, 2016 at 7:47:35 PM, Chester Wood ([email protected])
wrote:

The PR was accepted and merged into RN 0.17 I believe

On Tue, Jul 19, 2016 at 23:45 Adrian Perez [email protected]
wrote:

What happened to this?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<
#2208 (comment)
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AA7l1yZDK2oZQ8PIk9aB-ygpCUKXQt_-ks5qXbXvgaJpZM4FkT9B

.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#2208 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIIvM-taiwgf43gU81S_TdF4ADMCoK-ks5qXl83gaJpZM4FkT9B
.

DeDuckProject · 2016-08-15T15:54:14Z

It this working at the moment?

My package.json looks like this:

{
"name": "fetchy",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"setup_project": "npm run step1; npm run step2",
"step1": "rm -rf node_modules/react-native/node_modules/react; rm -rf node_modules/react-native/node_modules/fbjs; rm -rf node_modules/react/node_modules/fbjs",
"step2": "cd node_modules; find . -name .babelrc | grep -v packager | xargs rm"
},
"react-native": {
"domain": false
},
"dependencies": {
"globalize": "^1.1.1",
"moment": "^2.14.1",
"parse": "1.6.14",
"parse-react": "0.5.2",
"react": "^15.3.0",
"react-native": "0.30.0",
"react-datepicker": "^0.29.0",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"react-widgets": "^3.4.3",
"redux": "3.3.1",
"redux-form": "^5.3.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "1.0.3"
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"chai": "^3.5.0",
"chai-immutable": "^1.6.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"globalize-webpack-plugin": "^0.3.5",
"jsdom": "^9.4.1",
"mocha": "^3.0.0",
"node-sass": "^3.8.0",
"react-hot-loader": "^1.3.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

and then in my code:

var domain = require('domain');
console.log(domain);

and I get this:

"Requiring unknown module "domain"...." message. any idea?

mvayngrib · 2016-08-15T16:24:08Z

facebookarchive/node-haste#77 for browser exclude support has been merged, but node-haste has not been republished to npm since. You can try overriding installing node-haste from github to react-native's node-haste dep locally

gitim · 2016-08-22T11:24:52Z

Have the same error #9518, since node-haste was brought back to the react-native 667aaa4 overriding installing node-haste from github doesn't make sense.

Summary: React Native is a lot more powerful an environment than the browser, so we need an alternate mapping, as specified [here](https://github.com/defunctzombie/node-browser-resolve#browser-field) An example: ```js { "browser": { "./lib/server": false }, "react-native": { "dgram": "react-native-udp", "fs": "react-native-level-fs" }, "chromeapp": { "dgram": "chrome-dgram", "fs": "level-filesystem" } } ``` on the other hand, if "react-native" is not present in package.json, you should fall back to "browser" other than the one (nesting) test added, the tests are unchanged, just done for both "react-native" and "browser" (I've implemented [react-native-udp](https://npmjs.org/package/react-native-udp) and [react-native-level-fs](https://npmjs.org/package/react-native-level-fs), but they obviously don't belong in the traditional "browser" field as they won't run anywhere except in React Native.) Closes facebook/react-native#2208 Reviewed By: svcscm Differential Revision: D2691236 Pulled By: vjeux fb-gh-sync-id: 34041ed50bda4ec07f31d1dc50dcdfa428af2512

React Native used to have Map and Set polyfills that relied on tagging objects with a special __MAP_POLYFILL_INTERNAL_HASH__ property, which breaks down when the object to be tagged happens to be frozen. In 833072e (#3964) I introduced a workaround to make sure objects got tagged before becoming non-extensible, which robustly solved the problem for any Map and Set polyfills that rely on an object tagging strategy. Note that Apollo Client freezes objects only in development (using maybeDeepFreeze), so the problem fixPolyfills.ts was intended to solve was only ever a problem in development. I also submitted a PR to React Native that make their Map and Set polyfills store non-extensible objects in an array, rather than attempting to tag them: facebook/react-native#21492. Those changes were first released in React Native 0.59.0, so technically the fixPolyfills.ts logic should not be necessary for anyone using that version or later. Since then, React Native has stopped using any polyfills for Map and Set (yay!), so the need for the workaround has been even further reduced: facebook/react-native@93b9ac7 Those changes were first released in React Native 0.61.0, which is still the latest minor version (0.61.5 is latest). I'm not sure how many people are still using older versions of React Native, or what sort of LTS policies they have. Expo SDK 36 uses 0.61.4, for what it's worth: https://docs.expo.io/versions/latest/sdk/overview/ In any case, I think we can eliminate these polyfills from the default bundle, as long as we take some care to include them when bundling for React Native. This strategy uses a combination of techniques for selective bundling in React Native: https://facebook.github.io/react-native/docs/platform-specific-code#platform-specific-extensions facebook/react-native#2208

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Aug 3, 2015

ide assigned amasad Aug 3, 2015

browniefed mentioned this pull request Aug 11, 2015

[Packager] Feature request: Support for patching global apis #2238

Closed

leeyeh mentioned this pull request Aug 27, 2015

SDK 0.6.0 Unusable with React Native Packager leancloud/javascript-sdk#134

Closed

skevy mentioned this pull request Sep 23, 2015

Dependency inject React. remix-run/react-router#2031

Closed

skevy mentioned this pull request Oct 21, 2015

[Packager] Conditional require with RN Packager #3463

Closed

ide added the Packager label Oct 21, 2015

ide mentioned this pull request Nov 9, 2015

[Idea: JS] Add way to detect react-native (and platform) without require(). #1331

Closed

vjeux assigned vjeux and unassigned amasad Nov 9, 2015

vjeux added GH Review: needs-revision and removed GH Review: review-needed labels Nov 9, 2015

ide mentioned this pull request Nov 9, 2015

Is it possible to use replacement module with Packager? #4018

Closed

mvayngrib force-pushed the altBrowserField branch from 628362c to 8d1c186 Compare November 14, 2015 19:33

ide reviewed Nov 15, 2015
View reviewed changes

support react-native field with fallback to browser field

357d6da

mvayngrib force-pushed the altBrowserField branch from 8d1c186 to 357d6da Compare November 15, 2015 10:23

mvayngrib reviewed Nov 15, 2015
View reviewed changes

ghost closed this in b86f147 Nov 24, 2015

vjeux mentioned this pull request Nov 24, 2015

Set navigator.product to ReactNative #4083

Closed

dotted mentioned this pull request Jan 8, 2016

Add react-native compatability browserify/browserify-zlib#11

Open

vespakoen mentioned this pull request Feb 23, 2016

Consider browserify field tradle/rn-nodeify#8

Merged

koulmomo mentioned this pull request May 20, 2016

[fluxible-addons-react] batchedUpdatePlugin breaks compatibility with react-native yahoo/fluxible#443

Closed

jondubois mentioned this pull request Aug 22, 2016

Unknown module "ws" exception on Windows zalmoxisus/remote-redux-devtools#39

Closed

gitim mentioned this pull request Aug 22, 2016

[Packager] "Requiring unknown module" error for module from package.json browser field #9518

Closed

jgkim mentioned this pull request Dec 12, 2016

Add "react-native" key to package.json rtfeldman/seamless-immutable#181

Merged

nihgwu mentioned this pull request Mar 8, 2017

remove react-dom dependency on React Native dvajs/dva#686

Merged

nolanlawson mentioned this pull request Mar 26, 2017

[RFC] Discuss WASM, WASM Fallback package resolution support defunctzombie/package-browser-field-spec#8

Open

FrankSalad mentioned this pull request May 26, 2017

Fix asap browser dependency in react-native env. kriskowal/asap#72

Merged

benjamn mentioned this pull request Feb 18, 2020

Remove fixPolyfills.ts, except when bundling for React Native. apollographql/apollo-client#5962

Merged

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

support react-native field with fallback to browser field #2208

support react-native field with fallback to browser field #2208

mvayngrib commented Aug 3, 2015

ide commented Aug 3, 2015

lightsofapollo commented Aug 11, 2015

amasad commented Sep 8, 2015

mvayngrib commented Sep 8, 2015

facebook-github-bot commented Oct 21, 2015

vjeux commented Nov 9, 2015

mvayngrib commented Nov 9, 2015

vjeux commented Nov 9, 2015

chetstone commented Nov 11, 2015

facebook-github-bot commented Nov 14, 2015

ide Nov 15, 2015

ide Nov 15, 2015

mvayngrib Nov 15, 2015

ide Nov 15, 2015

mvayngrib Nov 15, 2015

facebook-github-bot commented Nov 15, 2015

ide commented Nov 24, 2015

almeynman commented Nov 24, 2015

vjeux commented Nov 24, 2015

facebook-github-bot commented Nov 24, 2015

vespakoen commented Feb 23, 2016

skevy commented Feb 26, 2016

vespakoen commented Feb 27, 2016

blackxored commented Jul 20, 2016

chetstone commented Jul 20, 2016

blackxored commented Jul 20, 2016

DeDuckProject commented Aug 15, 2016

mvayngrib commented Aug 15, 2016

gitim commented Aug 22, 2016

support react-native field with fallback to browser field #2208

support react-native field with fallback to browser field #2208

Conversation

mvayngrib commented Aug 3, 2015

ide commented Aug 3, 2015

lightsofapollo commented Aug 11, 2015

amasad commented Sep 8, 2015

mvayngrib commented Sep 8, 2015

facebook-github-bot commented Oct 21, 2015

vjeux commented Nov 9, 2015

mvayngrib commented Nov 9, 2015

vjeux commented Nov 9, 2015

chetstone commented Nov 11, 2015

facebook-github-bot commented Nov 14, 2015

ide Nov 15, 2015

Choose a reason for hiding this comment

ide Nov 15, 2015

Choose a reason for hiding this comment

mvayngrib Nov 15, 2015

Choose a reason for hiding this comment

ide Nov 15, 2015

Choose a reason for hiding this comment

mvayngrib Nov 15, 2015

Choose a reason for hiding this comment

facebook-github-bot commented Nov 15, 2015

ide commented Nov 24, 2015

almeynman commented Nov 24, 2015

vjeux commented Nov 24, 2015

facebook-github-bot commented Nov 24, 2015

vespakoen commented Feb 23, 2016

skevy commented Feb 26, 2016

vespakoen commented Feb 27, 2016

blackxored commented Jul 20, 2016

chetstone commented Jul 20, 2016

blackxored commented Jul 20, 2016

DeDuckProject commented Aug 15, 2016

mvayngrib commented Aug 15, 2016

gitim commented Aug 22, 2016