[React] Depend on npm "react" instead of shipping with a vendored copy #2985

Closed
ide opened this Issue Sep 23, 2015 · 60 comments

Comments

Projects
None yet
@ide
Collaborator

ide commented Sep 23, 2015

Pretty certain this is on the radar but want to track it because it's going to make a real difference for the overall React ecosystem when RN can require libraries like react-static-container, react-relay, react-redux, etc... that depend on "react" but not "react-dom".

cc @vjeux @spicyj

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Sep 23, 2015

Member

Yeah, we're blocked on some fbjs stuff where we can't use the open-source copy of fbjs in RN right now because of some Flow conflicts (and maybe packager too?). @gabelevi was going to make a change to Flow that will allow us to move fbjs away from haste so that we can have more than one copy, not sure what the status of that is right now.

We probably won't get everything sorted out in time for React 0.14 but maybe we can do a point release after we fix things up.

cc @sebmarkbage

Member

sophiebits commented Sep 23, 2015

Yeah, we're blocked on some fbjs stuff where we can't use the open-source copy of fbjs in RN right now because of some Flow conflicts (and maybe packager too?). @gabelevi was going to make a change to Flow that will allow us to move fbjs away from haste so that we can have more than one copy, not sure what the status of that is right now.

We probably won't get everything sorted out in time for React 0.14 but maybe we can do a point release after we fix things up.

cc @sebmarkbage

@ide ide referenced this issue in facebook/relay Sep 23, 2015

Closed

Make Relay work with React Native out of the box #26

4 of 5 tasks complete

@ide ide added the 🔷JavaScript label Sep 23, 2015

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Sep 24, 2015

Collaborator

Yes! This x 1000. Working on a react-router integration with RN right now and I had to dependency inject React into RR. Haha.

Interesting thing though, and something I didn't understand - "react-static-container" actually DOES work on RN. Is it because it requires React, not react, and the packager allows for that?

Collaborator

skevy commented Sep 24, 2015

Yes! This x 1000. Working on a react-router integration with RN right now and I had to dependency inject React into RR. Haha.

Interesting thing though, and something I didn't understand - "react-static-container" actually DOES work on RN. Is it because it requires React, not react, and the packager allows for that?

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Sep 24, 2015

Member

Rest assured that we're aware and making this work was a major motivating factor for the packaging changes.

Member

sophiebits commented Sep 24, 2015

Rest assured that we're aware and making this work was a major motivating factor for the packaging changes.

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Sep 24, 2015

Collaborator

👍

Collaborator

skevy commented Sep 24, 2015

👍

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 16, 2015

Collaborator

Redux dropped support for React Native bindings (https://github.com/rackt/react-redux/releases/tag/v4.0.0), and there's also an open issue with Relay compatibility (though Relay has to change a few other things too). So as far as the state of the overall React ecosystem influences your roadmap you might want to give this a little bump in priority.

Collaborator

ide commented Oct 16, 2015

Redux dropped support for React Native bindings (https://github.com/rackt/react-redux/releases/tag/v4.0.0), and there's also an open issue with Relay compatibility (though Relay has to change a few other things too). So as far as the state of the overall React ecosystem influences your roadmap you might want to give this a little bump in priority.

@sebmarkbage

This comment has been minimized.

Show comment
Hide comment
@sebmarkbage

sebmarkbage Oct 16, 2015

Member

It is my top priority after the blocker on fbjs/flow is done (which is unfortunately beyond me atm). cc @zpao

Member

sebmarkbage commented Oct 16, 2015

It is my top priority after the blocker on fbjs/flow is done (which is unfortunately beyond me atm). cc @zpao

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Oct 16, 2015

Member

We're still waiting on flow but as soon as that happens we'll get this sorted.

Member

zpao commented Oct 16, 2015

We're still waiting on flow but as soon as that happens we'll get this sorted.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 16, 2015

Collaborator

Nice! Thanks for the update.

Collaborator

ide commented Oct 16, 2015

Nice! Thanks for the update.

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Oct 16, 2015

Contributor

cc @joesavona

Contributor

vjeux commented Oct 16, 2015

cc @joesavona

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Oct 16, 2015

Collaborator

Thanks guys for being so diligent about this. I'm stoked to remove all my "-internal" private npm deps from my projects :)

Collaborator

skevy commented Oct 16, 2015

Thanks guys for being so diligent about this. I'm stoked to remove all my "-internal" private npm deps from my projects :)

@zsszatmari

This comment has been minimized.

Show comment
Hide comment

+1 :)

@rahul1346

This comment has been minimized.

Show comment
Hide comment
@rahul1346

rahul1346 Nov 9, 2015

any update...

any update...

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Nov 9, 2015

Member

Nope, still waiting on Flow but they should have their release out in the next week or so.

Member

sophiebits commented Nov 9, 2015

Nope, still waiting on Flow but they should have their release out in the next week or so.

@abhishiv

This comment has been minimized.

Show comment
Hide comment
@abhishiv

abhishiv Nov 15, 2015

Is there a fork/branch which already depends on react 14.0 that I can add to my package.json instead of the published package? I don't care about flow, but super excited to play with react-router and react-native.

Is there a fork/branch which already depends on react 14.0 that I can add to my package.json instead of the published package? I don't care about flow, but super excited to play with react-router and react-native.

@epeli epeli referenced this issue in acdlite/recompose Dec 29, 2015

Closed

React-native #76

@skevy skevy self-assigned this Dec 30, 2015

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Dec 30, 2015

Collaborator

This has landed in 6a838a4

I'm going to work later to verify that functionality is as expected when consuming something like Relay or Redux from npm (that depend on React).

Re: Relay, I'm 90% sure at this point that there are some bugs to fix (because there actually is still a tiny dependency on ReactDOM)...so it may not be 100% yet. But we're super close! Thanks for your work on this @spicyj!

Collaborator

skevy commented Dec 30, 2015

This has landed in 6a838a4

I'm going to work later to verify that functionality is as expected when consuming something like Relay or Redux from npm (that depend on React).

Re: Relay, I'm 90% sure at this point that there are some bugs to fix (because there actually is still a tiny dependency on ReactDOM)...so it may not be 100% yet. But we're super close! Thanks for your work on this @spicyj!

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Dec 30, 2015

Member

I broke the shrinkwrap. Wait for the next commit. :)

Member

sophiebits commented Dec 30, 2015

I broke the shrinkwrap. Wait for the next commit. :)

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Dec 30, 2015

Collaborator

it s happening

Collaborator

satya164 commented Dec 30, 2015

it s happening

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Dec 30, 2015

Collaborator

@spicyj I saw your shrinkwrap change landed. Can you close this if you believe this issue has been resolved?

Collaborator

ide commented Dec 30, 2015

@spicyj I saw your shrinkwrap change landed. Can you close this if you believe this issue has been resolved?

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Dec 30, 2015

Member

Still waiting for one more then I will.

Member

sophiebits commented Dec 30, 2015

Still waiting for one more then I will.

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Dec 31, 2015

Member

Okay. There might be a small tail of issues, but the core of this has been done in 6a838a4 and a few followup commits on master and should be in react-native 0.18 when released. I haven't tested with Relay, etc., but if your app depends on react (needs to be the same version as RN uses, currently 0.14.5) and you ensure that RN does not have its own copy (i.e., that node_modules/react-native/node_modules/react does not exist) then things "should" now work.

Feel free to open new issues and tag me in them if there are problems and I'll try to take a look.

(unlocking this issue)

Member

sophiebits commented Dec 31, 2015

Okay. There might be a small tail of issues, but the core of this has been done in 6a838a4 and a few followup commits on master and should be in react-native 0.18 when released. I haven't tested with Relay, etc., but if your app depends on react (needs to be the same version as RN uses, currently 0.14.5) and you ensure that RN does not have its own copy (i.e., that node_modules/react-native/node_modules/react does not exist) then things "should" now work.

Feel free to open new issues and tag me in them if there are problems and I'll try to take a look.

(unlocking this issue)

@sophiebits sophiebits closed this Dec 31, 2015

@facebook facebook unlocked this conversation Dec 31, 2015

ide pushed a commit to expo/react-native that referenced this issue Dec 31, 2015

Consume react, fbjs from npm
Summary:
We don't (yet) treat these the same as any other modules because we still have special resolution rules for them in the packager allowing the use of `providesModule`, but I believe this allows people to use npm react in their RN projects and not have duplicate copies of React. Fixes facebook/react-native#2985.

This relies on fbjs 0.6, which includes `.flow` files alongside the `.js` files to allow them to be typechecked without additional configuration. This also uses react 0.14.5, which shims a couple of files (as `.native.js`) to avoid DOM-specific bits. Once we fix these in React, we will use the same code on web and native. Hopefully we can also remove the packager support I'm adding here for `.native.js`.

This diff is not the desired end state for us – ideally the packager would know nothing of react or fbjs, and we'll get there eventually by not relying on `providesModule` in order to load react and fbjs modules. (fbjs change posted here but not merged yet: facebook/fbjs#84.)

This should also allow relay to work seamlessly with RN, but I haven't verified this.

public

Reviewed By: sebmarkbage

Differential Revision: D2786197

fb-gh-sync-id: ff50f28445e949edc9501f4b599df7970813870d
@sunjay

This comment has been minimized.

Show comment
Hide comment
@sunjay

sunjay Dec 31, 2015

@spicyj What does this mean for react native's usage with things like react-redux?

From the react-redux README:

React Native

Until React Native works on top of React instead of shipping a fork of React, you’ll need to keep using React Redux 3.x branch and documentation.

There isn't much explanation past there.

sunjay commented Dec 31, 2015

@spicyj What does this mean for react native's usage with things like react-redux?

From the react-redux README:

React Native

Until React Native works on top of React instead of shipping a fork of React, you’ll need to keep using React Redux 3.x branch and documentation.

There isn't much explanation past there.

@rclai

This comment has been minimized.

Show comment
Hide comment
@rclai

rclai Dec 31, 2015

Contributor

@sunjay, it means that you will be able to use the latest react-redux NPM package instead of react-redux@3.x and anything that uses react@0.14.0 as a peerDependency.

Contributor

rclai commented Dec 31, 2015

@sunjay, it means that you will be able to use the latest react-redux NPM package instead of react-redux@3.x and anything that uses react@0.14.0 as a peerDependency.

@jmrog jmrog referenced this issue in addthis/fluxthis Dec 31, 2015

Closed

React Native Compatibility #102

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Jan 1, 2016

Contributor

I was trying to get this to work on an app that both depends on react@0.14.5 and on react-native@master and I've got:

Error: Naming collision detected:
./node_modules/react/node_modules/fbjs/lib/warning.js
collides with
./node_modules/react-native/node_modules/fbjs/lib/warning.js

however I don't have any node_modules/react-native/node_modules/react

Contributor

gre commented Jan 1, 2016

I was trying to get this to work on an app that both depends on react@0.14.5 and on react-native@master and I've got:

Error: Naming collision detected:
./node_modules/react/node_modules/fbjs/lib/warning.js
collides with
./node_modules/react-native/node_modules/fbjs/lib/warning.js

however I don't have any node_modules/react-native/node_modules/react

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Jan 1, 2016

Member

@gre Try installing fbjs@0.6.0 at the top level and removing the inner ones? npm 3 would do this for you automatically, I believe.

Member

sophiebits commented Jan 1, 2016

@gre Try installing fbjs@0.6.0 at the top level and removing the inner ones? npm 3 would do this for you automatically, I believe.

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Jan 1, 2016

Contributor

I also had to install react-transform-hmr in node_modules/react-native. I have no idea for what reason it wasn't resolved (maybe related to installing from facebook/react-native#master ).

Anyway, thanks it works now :)

Contributor

gre commented Jan 1, 2016

I also had to install react-transform-hmr in node_modules/react-native. I have no idea for what reason it wasn't resolved (maybe related to installing from facebook/react-native#master ).

Anyway, thanks it works now :)

@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Jan 2, 2016

Collaborator

@gre the react-transform-hmr dep is just missing from master...that will be cleaned up before the next release.

Collaborator

skevy commented Jan 2, 2016

@gre the react-transform-hmr dep is just missing from master...that will be cleaned up before the next release.

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Jan 2, 2016

Contributor

@skevy great! I have an unpublished version of gl-react-* libs that work fine with this new version and depending on react & react-native, this is so cool :)

Users will have to not forget about installing fbjs because it doesn't seem to dedup by default. I'm not sure the best way to avoid this, maybe it should be added as a peerDep (maybe not in react-native but at least on each lib that want to be "universal" ?)

Contributor

gre commented Jan 2, 2016

@skevy great! I have an unpublished version of gl-react-* libs that work fine with this new version and depending on react & react-native, this is so cool :)

Users will have to not forget about installing fbjs because it doesn't seem to dedup by default. I'm not sure the best way to avoid this, maybe it should be added as a peerDep (maybe not in react-native but at least on each lib that want to be "universal" ?)

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Jan 2, 2016

Member

Sigh. I really wanted to only special-case the one copy of fbjs which is the one that RN uses, so any fbjs in a sibling directory would be okay to be bundled twice (since fbjs modules tend to not be stateful). Guess I'll need to change the packager more to make that work…

Member

sophiebits commented Jan 2, 2016

Sigh. I really wanted to only special-case the one copy of fbjs which is the one that RN uses, so any fbjs in a sibling directory would be okay to be bundled twice (since fbjs modules tend to not be stateful). Guess I'll need to change the packager more to make that work…

@Emilios1995 Emilios1995 referenced this issue in reduxjs/react-redux Jan 3, 2016

Closed

Update React Native installation instructions #236

@chrissm79 chrissm79 referenced this issue in nuwave/laravel-graphql-relay Jan 6, 2016

Open

Any example repos? #2

@alinz

This comment has been minimized.

Show comment
Hide comment
@alinz

alinz Jan 7, 2016

Contributor

@sunjay I managed to get it to work. You can take a look at the following repo
example-react-native-redux however there are some modification require in package modules which I described here reduxjs/react-redux#236 (comment)

Contributor

alinz commented Jan 7, 2016

@sunjay I managed to get it to work. You can take a look at the following repo
example-react-native-redux however there are some modification require in package modules which I described here reduxjs/react-redux#236 (comment)

@cancan101

This comment has been minimized.

Show comment
Hide comment
@cancan101

cancan101 Jan 11, 2016

Contributor

Any chance this will be fixed for 0.18?

Contributor

cancan101 commented Jan 11, 2016

Any chance this will be fixed for 0.18?

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Jan 11, 2016

Contributor

@cancan101 it will be fixed for 0.18. It is already fixed for 0.18-rc

Contributor

gre commented Jan 11, 2016

@cancan101 it will be fixed for 0.18. It is already fixed for 0.18-rc

@cancan101

This comment has been minimized.

Show comment
Hide comment
@cancan101

cancan101 Jan 11, 2016

Contributor

Sorry, I should clarify the 'this' i meant is the issue with fbjs and it did not seem to be fixed in the RC.

Contributor

cancan101 commented Jan 11, 2016

Sorry, I should clarify the 'this' i meant is the issue with fbjs and it did not seem to be fixed in the RC.

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Jan 12, 2016

Contributor

I ran into the fbjs conflict issue using npm 2. @spicyj's solution of installing fbjs at the root level didn't seem to solve it, but nuking my entire node_modules directory, installing npm 3, and then reinstalling everything did.

The getting started docs should probably be updated to recommend npm 3 if that's the official solution, too bad that it's so slow!

Contributor

corbt commented Jan 12, 2016

I ran into the fbjs conflict issue using npm 2. @spicyj's solution of installing fbjs at the root level didn't seem to solve it, but nuking my entire node_modules directory, installing npm 3, and then reinstalling everything did.

The getting started docs should probably be updated to recommend npm 3 if that's the official solution, too bad that it's so slow!

@Mokto

This comment has been minimized.

Show comment
Hide comment
@Mokto

Mokto Jan 12, 2016

Use @alinz solution, it works ! ;)

Mokto commented Jan 12, 2016

Use @alinz solution, it works ! ;)

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Jan 12, 2016

Contributor

@Mokto yeah, but it involves some pretty nasty hacks to work with npm@2 (reaching into packages and deleting the fbjs dependencies).

Contributor

corbt commented Jan 12, 2016

@Mokto yeah, but it involves some pretty nasty hacks to work with npm@2 (reaching into packages and deleting the fbjs dependencies).

@alinz

This comment has been minimized.

Show comment
Hide comment
@alinz

alinz Jan 12, 2016

Contributor

@corbt I agree that it involves some folder moving and hack but it should not cause you any problem. fbjs will be moved out from react-native eventually, in a meantime if you have a module that does not work with npm@3 then that would be your only options.

Contributor

alinz commented Jan 12, 2016

@corbt I agree that it involves some folder moving and hack but it should not cause you any problem. fbjs will be moved out from react-native eventually, in a meantime if you have a module that does not work with npm@3 then that would be your only options.

@Mokto

This comment has been minimized.

Show comment
Hide comment
@Mokto

Mokto Jan 12, 2016

I know it is nasty but you could add this to you package.json :

"postinstall": "npm run setup_project"

Mokto commented Jan 12, 2016

I know it is nasty but you could add this to you package.json :

"postinstall": "npm run setup_project"

@alinz

This comment has been minimized.

Show comment
Hide comment
@alinz

alinz Jan 12, 2016

Contributor

Also we need to detect in setup_project whether user is using npm@2 or npm@3

On Jan 12, 2016, at 3:30 PM, Mokto notifications@github.com wrote:

I know it is nasty but you could add this to you package.json :

"postinstall": "npm run setup_project"


Reply to this email directly or view it on GitHub.

Contributor

alinz commented Jan 12, 2016

Also we need to detect in setup_project whether user is using npm@2 or npm@3

On Jan 12, 2016, at 3:30 PM, Mokto notifications@github.com wrote:

I know it is nasty but you could add this to you package.json :

"postinstall": "npm run setup_project"


Reply to this email directly or view it on GitHub.

@mdramos mdramos referenced this issue in reduxjs/react-redux Jan 21, 2016

Closed

Is 4.x now supported in React Native? #261

@jeduan jeduan referenced this issue in ArnaudRinquin/react-native-radio-buttons May 10, 2016

Merged

Splits react-native and react to avoid warnings on >= 0.25 #29

@seekshiva seekshiva referenced this issue in algolia/react-element-to-jsx-string Sep 9, 2016

Closed

EventPluginRegistry: Cannot inject event plugin ordering more than once. #42

cpojer pushed a commit to facebook/metro that referenced this issue Jan 26, 2017

Consume react, fbjs from npm
Summary:
We don't (yet) treat these the same as any other modules because we still have special resolution rules for them in the packager allowing the use of `providesModule`, but I believe this allows people to use npm react in their RN projects and not have duplicate copies of React. Fixes facebook/react-native#2985.

This relies on fbjs 0.6, which includes `.flow` files alongside the `.js` files to allow them to be typechecked without additional configuration. This also uses react 0.14.5, which shims a couple of files (as `.native.js`) to avoid DOM-specific bits. Once we fix these in React, we will use the same code on web and native. Hopefully we can also remove the packager support I'm adding here for `.native.js`.

This diff is not the desired end state for us – ideally the packager would know nothing of react or fbjs, and we'll get there eventually by not relying on `providesModule` in order to load react and fbjs modules. (fbjs change posted here but not merged yet: facebook/fbjs#84.)

This should also allow relay to work seamlessly with RN, but I haven't verified this.

public

Reviewed By: sebmarkbage

Differential Revision: D2786197

fb-gh-sync-id: ff50f28445e949edc9501f4b599df7970813870d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment